HTML

HTML
Verso 1.0.0
Sumrio
I Sobre essa Apostila 4 6 11 20
21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 22 22 22 22 22 22 23 24 24 25 25 25 26 27 27 29 29 30 31
II Informaes Bsicas III GNU Free Documentation License IV HTML
1 O que HTML? 2 Plano de ensino 2.1 Objetivo . . . . . . . 2.2 Pblico Alvo . . . . . 2.3 Pr-requisitos . . . . 2.4 Descrio . . . . . . 2.5 Metodologia . . . . . 2.5.1 Cronograma 2.6 Programa . . . . . . 2.7 Avaliao . . . . . . 2.8 Bibliograa . . . . .
3 O que internet? 3.1 O que internet? . . . . . 3.2 Protocolos . . . . . . . . . . 3.3 Recursos da Internet . . . 3.4 O que World-Wide Web? 3.5 HTTP , URL , HTML . . . .
4 Introduo ao HTML 4.1 Introduo Linguagem HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.2 Edio de documentos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.3 Edio de documentos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5 Documento bsico e seus componentes 32 5.1 A seo <HEAD> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 5.2 A seo <BODY> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
CDTC
Centro de Difuso de Tecnologia e Conhecimento
Brasil/DF 36 36 37 38 43 43 43 44 46 47 48 49 49 50 50
6 Cabealhos, Separadores e Listas 6.1 Cabealhos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.2 Separadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.3 Listas em HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Formatao de texto e caracteres 7.1 Formatao de textos e caracteres 7.2 Blocos de texto . . . . . . . . . . . 7.3 Formatao de frases . . . . . . . 7.4 Caracteres especiais . . . . . . . . 7.5 Cores e fontes . . . . . . . . . . . 7.6 Marquee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8 Ligaes (uso de links) 8.1 Ligaes (uso de links) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8.2 Caminhos (uso de links) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8.3 Indicadores (uso de links) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9 Insero de Imagens 52 9.1 Insero de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 9.2 Atributos bsicos de imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 9.3 Molduras de imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 10 Tabelas 10.1 Tabelas . . . . . . . . . . . . . 10.2 Elementos bsicos de tabelas . 10.3 Alinhamento em tabelas . . . . 10.4 Atributos de largura . . . . . . 10.5 Atributos de espaamento . . . 10.6 Extenses de tabelas . . . . . 11 Frames 11.1 Frames . . . . . . . . . . 11.2 Links com Frames . . . . 11.3 Composio com Frames 11.4 Atributos de Frames . . . 12 Interao 12.1 Interao . 12.2 Mapas . . . 12.3 Formulrios 12.4 INPUT . . . 12.5 SELECT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 56 56 58 59 61 62 64 64 65 66 67 69 69 69 72 73 75 77 77 78 79
13 udio e Vdeo 13.1 udio e Vdeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.2 Tipos de arquivo de udio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13.3 Vdeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CDTC
Brasil/DF
14 Lioo 12 - Folhas de estilo 80 14.1 Folhas de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 14.2 Opes gerais de formatao com folhas de estilo . . . . . . . . . . . . . . . . . . . 81
Parte I
Sobre essa Apostila
CDTC
Brasil/DF
Contedo
O contedo dessa apostila fruto da compilao de diversos materiais livres publicados na internet, disponveis em diversos sites ou originalmente produzido no CDTC (http://www.cdtc.org.br.) O formato original deste material bem como sua atualizao est disponvel dentro da licena GNU Free Documentation License, cujo teor integral encontra-se aqui reproduzido na seo de mesmo nome, tendo inclusive uma verso traduzida (no ocial). A reviso e alterao vem sendo realizada pelo CDTC (suporte@cdtc.org.br) desde outubro de 2006. Crticas e sugestes construtivas sero bem-vindas a qualquer hora.
Autores
A autoria deste de responsabilidade de Sidney Ricardo Britto Villela de Medeiros (sidneyr@cdtc.org.br). O texto original faz parte do projeto Centro de Difuso de Tecnologia e Conhecimento que vm sendo realizado pelo ITI (Instituto Nacional de Tecnologia da Informao) em conjunto com outros parceiros institucionais, e com as universidades federais brasileiras que tem produzido e utilizado Software Livre apoiando inclusive a comunidade Free Software junto a outras entidades no pas. Informaes adicionais podem ser obtidas atravs do email ouvidoria@cdtc.org.br, ou da home page da entidade, atravs da URL http://www.cdtc.org.br.
Garantias
O material contido nesta apostila isento de garantias e o seu uso de inteira responsabilidade do usurio/leitor. Os autores, bem como o ITI e seus parceiros, no se responsabilizam direta ou indiretamente por qualquer prejuzo oriundo da utilizao do material aqui contido.
Licena
Copyright 2006, Instituto Nacional de Tecnologia da Informao (cdtc@iti.gov.br) . Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with the Invariant Chapter being SOBRE ESSA APOSTILA. A copy of the license is included in the section entitled GNU Free Documentation License.
Parte II
Informaes Bsicas
CDTC
Brasil/DF
Sobre o CDTC
Objetivo Geral O Projeto CDTC visa a promoo e o desenvolvimento de aes que incentivem a disseminao de solues que utilizem padres abertos e no proprietrios de tecnologia, em proveito do desenvolvimento social, cultural, poltico, tecnolgico e econmico da sociedade brasileira. Objetivo Especco Auxiliar o Governo Federal na implantao do plano nacional de software no-proprietrio e de cdigo fonte aberto, identicando e mobilizando grupos de formadores de opinio dentre os servidores pblicos e agentes polticos da Unio Federal, estimulando e incentivando o mercado nacional a adotar novos modelos de negcio da tecnologia da informao e de novos negcios de comunicao com base em software no-proprietrio e de cdigo fonte aberto, oferecendo treinamento especco para tcnicos, prossionais de suporte e funcionrios pblicos usurios, criando grupos de funcionrios pblicos que iro treinar outros funcionrios pblicos e atuar como incentivadores e defensores dos produtos de software no proprietrios e cdigo fonte aberto, oferecendo contedo tcnico on-line para servios de suporte, ferramentas para desenvolvimento de produtos de software no proprietrios e do seu cdigo fonte livre, articulando redes de terceiros (dentro e fora do governo) fornecedoras de educao, pesquisa, desenvolvimento e teste de produtos de software livre.
Guia do aluno
Neste guia, voc ter reunidas uma srie de informaes importantes para que voc comece seu curso. So elas: Licenas para cpia de material disponvel; Os 10 mandamentos do aluno de Educao a Distncia; Como participar dos foruns e da wikipdia; Primeiros passos. muito importante que voc entre em contato com TODAS estas informaes, seguindo o roteiro acima.
Licena
Copyright 2006, Instituto Nacional de Tecnologia da Informao (cdtc@iti.gov.br). 7
CDTC
Brasil/DF
dada permisso para copiar, distribuir e/ou modicar este documento sob os termos da Licena de Documentao Livre GNU, Verso 1.1 ou qualquer verso posterior pblicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSA APOSTILA. Uma cpia da licena est inclusa na seo entitulada "Licena de Documentao Livre GNU".
Os 10 mandamentos do aluno de educao online
1. Acesso Internet: ter endereo eletrnico, um provedor e um equipamento adequado pr-requisito para a participao nos cursos a distncia; 2. Habilidade e disposio para operar programas: ter conhecimentos bsicos de Informtica necessrio para poder executar as tarefas; 3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distncia conta muitos pontos, pois ir colaborar para o processo ensino-aprendizagem pessoal, dos colegas e dos professores; 4. Comportamentos compatveis com a etiqueta: mostrar-se interessado em conhecer seus colegas de turma respeitando-os e se fazendo ser respeitado pelos mesmos; 5. Organizao pessoal: planejar e organizar tudo fundamental para facilitar a sua reviso e a sua recuperao de materiais; 6. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigaes e realiz-las em tempo real; 7. Curiosidade e abertura para inovaes: aceitar novas idias e inovar sempre; 8. Flexibilidade e adaptao: requisitos necessrio mudana tecnolgica, aprendizagens e descobertas; 9. Objetividade em sua comunicao: comunicar-se de forma clara, breve e transparente ponto - chave na comunicao pela Internet; 10. Responsabilidade: ser responsvel por seu prprio aprendizado. O ambiente virtual no controla a sua dedicao, mas reete os resultados do seu esforo e da sua colaborao.
Como participar dos fruns e Wikipdia

Voc tem um problema e precisa de ajuda? Podemos te ajudar de 2 formas: A primeira o uso dos fruns de notcias e de dvidas gerais que se distinguem pelo uso: . O frum de notcias tem por objetivo disponibilizar um meio de acesso rpido a informaes que sejam pertinentes ao curso (avisos, notcias). As mensagens postadas nele so enviadas a 8
CDTC
Brasil/DF
todos participantes. Assim, se o monitor ou algum outro participante tiver uma informao que interesse ao grupo, favor post-la aqui. Porm, se o que voc deseja resolver alguma dvida ou discutir algum tpico especco do curso. recomendado que voc faa uso do Frum de dvidas gerais que lhe d recursos mais efetivos para esta prtica. . O frum de dvidas gerais tem por objetivo disponibilizar um meio fcil, rpido e interativo para solucionar suas dvidas e trocar experincias. As mensagens postadas nele so enviadas a todos participantes do curso. Assim, ca muito mais fcil obter respostas, j que todos podem ajudar. Se voc receber uma mensagem com algum tpico que saiba responder, no se preocupe com a formalizao ou a gramtica. Responda! E no se esquea de que antes de abrir um novo tpico recomendvel ver se a sua pergunta j foi feita por outro participante. A segunda forma se d pelas Wikis: . Uma wiki uma pgina web que pode ser editada colaborativamente, ou seja, qualquer participante pode inserir, editar, apagar textos. As verses antigas vo sendo arquivadas e podem ser recuperadas a qualquer momento que um dos participantes o desejar. Assim, ela oferece um timo suporte a processos de aprendizagem colaborativa. A maior wiki na web o site "Wikipdia", uma experincia grandiosa de construo de uma enciclopdia de forma colaborativa, por pessoas de todas as partes do mundo. Acesse-a em portugus pelos links: Pgina principal da Wiki - http://pt.wikipedia.org/wiki/ Agradecemos antecipadamente a sua colaborao com a aprendizagem do grupo!
Primeiros Passos
Para uma melhor aprendizagem recomendvel que voc siga os seguintes passos: Ler o Plano de Ensino e entender a que seu curso se dispe a ensinar; Ler a Ambientao do Moodle para aprender a navegar neste ambiente e se utilizar das ferramentas bsicas do mesmo; Entrar nas lies seguindo a seqncia descrita no Plano de Ensino; Qualquer dvida, reporte ao Frum de Dvidas Gerais.
Perl do Tutor
Segue-se uma descrio do tutor ideal, baseada no feedback de alunos e de tutores. O tutor ideal um modelo de excelncia: consistente, justo e prossional nos respectivos valores e atitudes, incentiva mas honesto, imparcial, amvel, positivo, respeitador, aceita as idias dos estudantes, paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar. 9
CDTC
Brasil/DF
A classicao por um tutor desta natureza proporciona o melhor feedback possvel, crucial, e, para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem. Este tutor ou instrutor: fornece explicaes claras acerca do que ele espera e do estilo de classicao que ir utilizar; gosta que lhe faam perguntas adicionais; identica as nossas falhas, mas corrige-as amavelmente, diz um estudante, e explica porque motivo a classicao foi ou no foi atribuda; tece comentrios completos e construtivos, mas de forma agradvel (em contraste com um reparo de um estudante: os comentrios deixam-nos com uma sensao de crtica, de ameaa e de nervossismo) d uma ajuda complementar para encorajar um estudante em diculdade; esclarece pontos que no foram entendidos, ou corretamente aprendidos anteriormente; ajuda o estudante a alcanar os seus objetivos; exvel quando necessrio; mostra um interesse genuno em motivar os alunos (mesmo os principiantes e, por isso, talvez numa fase menos interessante para o tutor); escreve todas as correes de forma legvel e com um nvel de pormenorizao adequado; acima de tudo, devolve os trabalhos rapidamente;
10
Parte III
GNU Free Documentation License
11
CDTC
Brasil/DF
(Traduzido pelo Joo S. O. Bueno atravs do CIPSGA em 2001) Esta uma traduo no ocial da Licena de Documentao Livre GNU em Portugus Brasileiro. Ela no publicada pela Free Software Foundation, e no se aplica legalmente a distribuio de textos que usem a GFDL - apenas o texto original em Ingls da GNU FDL faz isso. Entretanto, ns esperamos que esta traduo ajude falantes de portugus a entenderem melhor a GFDL. This is an unofcial translation of the GNU General Documentation License into Brazilian Portuguese. It was not published by the Free Software Foundation, and does not legally state the distribution terms for software that uses the GFDLonly the original English text of the GFDL does that. However, we hope that this translation will help Portuguese speakers understand the GFDL better. Licena de Documentao Livre GNU Verso 1.1, Maro de 2000 Copyright (C) 2000 Free Software Foundation, Inc. 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA permitido a qualquer um copiar e distribuir cpias exatas deste documento de licena, mas no permitido alter-lo.
INTRODUO
O propsito desta Licena deixar um manual, livro-texto ou outro documento escrito "livre"no sentido de liberdade: assegurar a qualquer um a efetiva liberdade de copi-lo ou redistribui-lo, com ou sem modicaes, comercialmente ou no. Secundariamente, esta Licena mantm para o autor e editor uma forma de ter crdito por seu trabalho, sem ser considerado responsvel pelas modicaes feitas por terceiros. Esta Licena um tipo de "copyleft"("direitos revertidos"), o que signica que derivaes do documento precisam ser livres no mesmo sentido. Ela complementa a GNU Licena Pblica Geral (GNU GPL), que um copyleft para software livre. Ns zemos esta Licena para que seja usada em manuais de software livre, por que software livre precisa de documentao livre: um programa livre deve ser acompanhado de manuais que provenham as mesmas liberdades que o software possui. Mas esta Licena no est restrita a manuais de software; ela pode ser usada para qualquer trabalho em texto, independentemente do assunto ou se ele publicado como um livro impresso. Ns recomendamos esta Licena principalmente para trabalhos cujo propsito seja de introduo ou referncia.
APLICABILIDADE E DEFINIES
Esta Licena se aplica a qualquer manual ou outro texto que contenha uma nota colocada pelo detentor dos direitos autorais dizendo que ele pode ser distribudo sob os termos desta Licena. O "Documento"abaixo se refere a qualquer manual ou texto. Qualquer pessoa do pblico um
12
CDTC
Brasil/DF
licenciado e referida como "voc". Uma "Verso Modicada"do Documento se refere a qualquer trabalho contendo o documento ou uma parte dele, quer copiada exatamente, quer com modicaes e/ou traduzida em outra lngua. Uma "Seo Secundria" um apndice ou uma seo inicial do Documento que trata exclusivamente da relao dos editores ou dos autores do Documento com o assunto geral do Documento (ou assuntos relacionados) e no contm nada que poderia ser includo diretamente nesse assunto geral (Por exemplo, se o Documento em parte um livro texto de matemtica, a Seo Secundria pode no explicar nada de matemtica). Essa relao poderia ser uma questo de ligao histrica com o assunto, ou matrias relacionadas, ou de posies legais, comerciais, loscas, ticas ou polticas relacionadas ao mesmo. As "Sees Invariantes"so certas Sees Secundrias cujos ttulos so designados, como sendo de Sees Invariantes, na nota que diz que o Documento publicado sob esta Licena. Os "Textos de Capa"so certos trechos curtos de texto que so listados, como Textos de Capa Frontal ou Textos da Quarta Capa, na nota que diz que o texto publicado sob esta Licena. Uma cpia "Transparente"do Documento signica uma cpia que pode ser lida automaticamente, representada num formato cuja especicao esteja disponvel ao pblico geral, cujos contedos possam ser vistos e editados diretamente e sem mecanismos especiais com editores de texto genricos ou (para imagens compostas de pixels) programas de pintura genricos ou (para desenhos) por algum editor de desenhos grandemente difundido, e que seja passvel de servir como entrada a formatadores de texto ou para traduo automtica para uma variedade de formatos que sirvam de entrada para formatadores de texto. Uma cpia feita em um formato de arquivo outrossim Transparente cuja constituio tenha sido projetada para atrapalhar ou desencorajar modicaes subsequentes pelos leitores no Transparente. Uma cpia que no "Transparente" chamada de "Opaca". Exemplos de formatos que podem ser usados para cpias Transparentes incluem ASCII simples sem marcaes, formato de entrada do Texinfo, formato de entrada do LaTex, SGML ou XML usando uma DTD disponibilizada publicamente, e HTML simples, compatvel com os padres, e projetado para ser modicado por pessoas. Formatos opacos incluem PostScript, PDF, formatos proprietrios que podem ser lidos e editados apenas com processadores de texto proprietrios, SGML ou XML para os quais a DTD e/ou ferramentas de processamento e edio no estejam disponveis para o pblico, e HTML gerado automaticamente por alguns editores de texto com nalidade apenas de sada. A "Pgina do Ttulo"signica, para um livro impresso, a pgina do ttulo propriamente dita, mais quaisquer pginas subsequentes quantas forem necessrias para conter, de forma legvel, o material que esta Licena requer que aparea na pgina do ttulo. Para trabalhos que no tenham uma pgina do ttulo, "Pgina do Ttulo"signica o texto prximo da apario mais proeminente do ttulo do trabalho, precedendo o incio do corpo do texto.
13
CDTC
Brasil/DF
FAZENDO CPIAS EXATAS

Voc pode copiar e distribuir o Documento em qualquer meio, de forma comercial ou no comercial, desde que esta Licena, as notas de copyright, e a nota de licena dizendo que esta Licena se aplica ao documento estejam reproduzidas em todas as cpias, e que voc no acrescente nenhuma outra condio, quaisquer que sejam, s desta Licena. Voc no pode usar medidas tcnicas para obstruir ou controlar a leitura ou confeco de cpias subsequentes das cpias que voc zer ou distribuir. Entretanto, voc pode aceitar compensao em troca de cpias. Se voc distribuir uma quantidade grande o suciente de cpias, voc tambm precisa respeitar as condies da seo 3. Voc tambm pode emprestar cpias, sob as mesmas condies colocadas acima, e tambm pode exibir cpias publicamente.
FAZENDO CPIAS EM QUANTIDADE

Se voc publicar cpias do Documento em nmero maior que 100, e a nota de licena do Documento obrigar Textos de Capa, voc precisar incluir as cpias em capas que tragam, clara e legivelmente, todos esses Textos de Capa: Textos de Capa da Frente na capa da frente, e Textos da Quarta Capa na capa de trs. Ambas as capas tambm precisam identicar clara e legivelmente voc como o editor dessas cpias. A capa da frente precisa apresentar o ttulo completo com todas as palavras do ttulo igualmente proeminentes e visveis. Voc pode adicionar outros materiais s capas. Fazer cpias com modicaes limitadas s capas, tanto quanto estas preservem o ttulo do documento e satisfaam a essas condies, pode ser tratado como cpia exata em outros aspectos. Se os textos requeridos em qualquer das capas for muito volumoso para caber de forma legvel, voc deve colocar os primeiros (tantos quantos couberem de forma razovel) na capa verdadeira, e continuar os outros nas pginas adjacentes. Se voc publicar ou distribuir cpias Opacas do Documento em nmero maior que 100, voc precisa ou incluir uma cpia Transparente que possa ser lida automaticamente com cada cpia Opaca, ou informar, em ou com, cada cpia Opaca a localizao de uma cpia Transparente completa do Documento acessvel publicamente em uma rede de computadores, qual o pblico usurio de redes tenha acesso a download gratuito e annimo utilizando padres pblicos de protocolos de rede. Se voc utilizar o segundo mtodo, voc precisar tomar cuidados razoavelmente prudentes, quando iniciar a distribuio de cpias Opacas em quantidade, para assegurar que esta cpia Transparente vai permanecer acessvel desta forma na localizao especicada por pelo menos um ano depois da ltima vez em que voc distribuir uma cpia Opaca (diretamente ou atravs de seus agentes ou distribuidores) daquela edio para o pblico. pedido, mas no obrigatrio, que voc contate os autores do Documento bem antes de redistribuir qualquer grande nmero de cpias, para lhes dar uma oportunidade de prover voc com uma verso atualizada do Documento.
14
CDTC
Brasil/DF
MODIFICAES
Voc pode copiar e distribuir uma Verso Modicada do Documento sob as condies das sees 2 e 3 acima, desde que voc publique a Verso Modicada estritamente sob esta Licena, com a Verso Modicada tomando o papel do Documento, de forma a licenciar a distribuio e modicao da Verso Modicada para quem quer que possua uma cpia da mesma. Alm disso, voc precisa fazer o seguinte na verso modicada: A. Usar na Pgina de Ttulo (e nas capas, se houver alguma) um ttulo distinto daquele do Documento, e daqueles de verses anteriores (que deveriam, se houvesse algum, estarem listados na seo "Histrico do Documento"). Voc pode usar o mesmo ttulo de uma verso anterior se o editor original daquela verso lhe der permisso; B. Listar na Pgina de Ttulo, como autores, uma ou mais das pessoas ou entidades responsveis pela autoria das modicaes na Verso Modicada, conjuntamente com pelo menos cinco dos autores principais do Documento (todos os seus autores principais, se ele tiver menos que cinco); C. Colocar na Pgina de Ttulo o nome do editor da Verso Modicada, como o editor; D. Preservar todas as notas de copyright do Documento; E. Adicionar uma nota de copyright apropriada para suas prprias modicaes adjacente s outras notas de copyright; F. Incluir, imediatamente depois das notas de copyright, uma nota de licena dando ao pblico o direito de usar a Verso Modicada sob os termos desta Licena, na forma mostrada no tpico abaixo; G. Preservar nessa nota de licena as listas completas das Sees Invariantes e os Textos de Capa requeridos dados na nota de licena do Documento; H. Incluir uma cpia inalterada desta Licena; I. Preservar a seo entitulada "Histrico", e seu ttulo, e adicionar mesma um item dizendo pelo menos o ttulo, ano, novos autores e editor da Verso Modicada como dados na Pgina de Ttulo. Se no houver uma sesso denominada "Histrico"no Documento, criar uma dizendo o ttulo, ano, autores, e editor do Documento como dados em sua Pgina de Ttulo, ento adicionar um item descrevendo a Verso Modicada, tal como descrito na sentena anterior; J. Preservar o endereo de rede, se algum, dado no Documento para acesso pblico a uma cpia Transparente do Documento, e da mesma forma, as localizaes de rede dadas no Documento para as verses anteriores em que ele foi baseado. Elas podem ser colocadas na seo "Histrico". Voc pode omitir uma localizao na rede para um trabalho que tenha sido publicado pelo menos quatro anos antes do Documento, ou se o editor original da verso a que ela se rera der sua permisso; K. Em qualquer seo entitulada "Agradecimentos"ou "Dedicatrias", preservar o ttulo da 15
CDTC
Brasil/DF
seo e preservar a seo em toda substncia e m de cada um dos agradecimentos de contribuidores e/ou dedicatrias dados; L. Preservar todas as Sees Invariantes do Documento, inalteradas em seus textos ou em seus ttulos. Nmeros de seo ou equivalentes no so considerados parte dos ttulos da seo; M. Apagar qualquer seo entitulada "Endossos". Tal sesso no pode ser includa na Verso Modicada; N. No reentitular qualquer seo existente com o ttulo "Endossos"ou com qualquer outro ttulo dado a uma Seo Invariante. Se a Verso Modicada incluir novas sees iniciais ou apndices que se qualiquem como Sees Secundrias e no contenham nenhum material copiado do Documento, voc pode optar por designar alguma ou todas aquelas sees como invariantes. Para fazer isso, adicione seus ttulos lista de Sees Invariantes na nota de licena da Verso Modicada. Esses ttulos precisam ser diferentes de qualquer outro ttulo de seo. Voc pode adicionar uma seo entitulada "Endossos", desde que ela no contenha qualquer coisa alm de endossos da sua Verso Modicada por vrias pessoas ou entidades - por exemplo, declaraes de revisores ou de que o texto foi aprovado por uma organizao como a denio ocial de um padro. Voc pode adicionar uma passagem de at cinco palavras como um Texto de Capa da Frente , e uma passagem de at 25 palavras como um Texto de Quarta Capa, ao nal da lista de Textos de Capa na Verso Modicada. Somente uma passagem de Texto da Capa da Frente e uma de Texto da Quarta Capa podem ser adicionados por (ou por acordos feitos por) qualquer entidade. Se o Documento j incluir um texto de capa para a mesma capa, adicionado previamente por voc ou por acordo feito com alguma entidade para a qual voc esteja agindo, voc no pode adicionar um outro; mas voc pode trocar o antigo, com permisso explcita do editor anterior que adicionou a passagem antiga. O(s) autor(es) e editor(es) do Documento no do permisso por esta Licena para que seus nomes sejam usados para publicidade ou para assegurar ou implicar endossamento de qualquer Verso Modicada.
COMBINANDO DOCUMENTOS
Voc pode combinar o Documento com outros documentos publicados sob esta Licena, sob os termos denidos na seo 4 acima para verses modicadas, desde que voc inclua na combinao todas as Sees Invariantes de todos os documentos originais, sem modicaes, e liste todas elas como Sees Invariantes de seu trabalho combinado em sua nota de licena. O trabalho combinado precisa conter apenas uma cpia desta Licena, e Sees Invariantes Idnticas com multiplas ocorrncias podem ser substitudas por apenas uma cpia. Se houver mltiplas Sees Invariantes com o mesmo nome mas com contedos distintos, faa o ttulo de 16
CDTC
Brasil/DF
cada seo nico adicionando ao nal do mesmo, em parnteses, o nome do autor ou editor origianl daquela seo, se for conhecido, ou um nmero que seja nico. Faa o mesmo ajuste nos ttulos de seo na lista de Sees Invariantes nota de licena do trabalho combinado. Na combinao, voc precisa combinar quaisquer sees entituladas "Histrico"dos diversos documentos originais, formando uma seo entitulada "Histrico"; da mesma forma combine quaisquer sees entituladas "Agradecimentos", ou "Dedicatrias". Voc precisa apagar todas as sees entituladas como "Endosso".
COLETNEAS DE DOCUMENTOS
Voc pode fazer uma coletnea consitindo do Documento e outros documentos publicados sob esta Licena, e substituir as cpias individuais desta Licena nos vrios documentos com uma nica cpia incluida na coletnea, desde que voc siga as regras desta Licena para cpia exata de cada um dos Documentos em todos os outros aspectos. Voc pode extrair um nico documento de tal coletnea, e distribu-lo individualmente sob esta Licena, desde que voc insira uma cpia desta Licena no documento extrado, e siga esta Licena em todos os outros aspectos relacionados cpia exata daquele documento.
AGREGAO COM TRABALHOS INDEPENDENTES

Uma compilao do Documento ou derivados dele com outros trabalhos ou documentos separados e independentes, em um volume ou mdia de distribuio, no conta como uma Verso Modicada do Documento, desde que nenhum copyright de compilao seja reclamado pela compilao. Tal compilao chamada um "agregado", e esta Licena no se aplica aos outros trabalhos auto-contidos compilados junto com o Documento, s por conta de terem sido assim compilados, e eles no so trabalhos derivados do Documento. Se o requerido para o Texto de Capa na seo 3 for aplicvel a essas cpias do Documento, ento, se o Documento constituir menos de um quarto de todo o agregado, os Textos de Capa do Documento podem ser colocados em capas adjacentes ao Documento dentro do agregado. Seno eles precisaro aparecer nas capas de todo o agregado.
TRADUO
Traduo considerada como um tipo de modicao, ento voc pode distribuir tradues do Documento sob os termos da seo 4. A substituio de Sees Invariantes por tradues requer uma permisso especial dos detentores do copyright das mesmas, mas voc pode incluir tradues de algumas ou de todas as Sees Invariantes em adio s verses orignais dessas Sees Invariantes. Voc pode incluir uma traduo desta Licena desde que voc tambm inclua a verso original em Ingls desta Licena. No caso de discordncia entre a traduo e a
17
CDTC
Brasil/DF
verso original em Ingls desta Licena, a verso original em Ingls prevalecer.
TRMINO
Voc no pode copiar, modicar, sublicenciar, ou distribuir o Documento exceto como expressamente especicado sob esta Licena. Qualquer outra tentativa de copiar, modicar, sublicenciar, ou distribuir o Documento nula, e resultar automaticamente no trmino de seus direitos sob esta Licena. Entretanto, terceiros que tenham recebido cpias, ou direitos de voc sob esta Licena no tero suas licenas terminadas, tanto quanto esses terceiros permaneam em total acordo com esta Licena.
REVISES FUTURAS DESTA LICENA

A Free Software Foundation pode publicar novas verses revisadas da Licena de Documentao Livre GNU de tempos em tempos. Tais novas verses sero similares em espirito verso presente, mas podem diferir em detalhes ao abordarem novos porblemas e preocupaes. Veja http://www.gnu.org/copyleft/. A cada verso da Licena dado um nmero de verso distinto. Se o Documento especicar que uma verso particular desta Licena "ou qualquer verso posterior"se aplica ao mesmo, voc tem a opo de seguir os termos e condies daquela verso especca, ou de qualquer verso posterior que tenha sido publicada (no como rascunho) pela Free Software Foundation. Se o Documento no especicar um nmero de Verso desta Licena, voc pode escolher qualquer verso j publicada (no como rascunho) pela Free Software Foundation. ADENDO: Como usar esta Licena para seus documentos Para usar esta Licena num documento que voc escreveu, inclua uma cpia desta Licena no documento e ponha as seguintes notas de copyright e licenas logo aps a pgina de ttulo: Copyright (c) ANO SEU NOME. dada permisso para copiar, distribuir e/ou modicar este documento sob os termos da Licena de Documentao Livre GNU, Verso 1.1 ou qualquer verso posterior publicada pela Free Software Foundation; com as Sees Invariantes sendo LISTE SEUS TTULOS, com os Textos da Capa da Frente sendo LISTE, e com os Textos da Quarta-Capa sendo LISTE. Uma cpia da licena est inclusa na seo entitulada "Licena de Documentao Livre GNU". Se voc no tiver nenhuma Seo Invariante, escreva "sem Sees Invariantes"ao invs de dizer quais so invariantes. Se voc no tiver Textos de Capa da Frente, escreva "sem Textos de Capa da Frente"ao invs de "com os Textos de Capa da Frente sendo LISTE"; o mesmo para os Textos da Quarta Capa. Se o seu documento contiver exemplos no triviais de cdigo de programas, ns recomendamos a publicao desses exemplos em paralelo sob a sua escolha de licena de software livre,
18
CDTC
Brasil/DF
tal como a GNU General Public License, para permitir o seu uso em software livre.
19
Parte IV
HTML
20
Captulo 1
O que HTML?
HTML uma linguagem de marcao simples e eciente para a criao de pginas para a internet que possam ser interpretadas pelos browsers e exibidas na rede mundial de computadores. Ao nal do curso o aluno ser capaz de criar sites para internet e disponibilz-los para que possam ser vistos por usurios de todo o mundo. O curso, com base na distribuio Debian possui trs semanas, comea na Segunda-Feira da primeira semana e termina no Domingo da ltima semana. Todo o contedo do curso estar visvel somente a partir da data de incio.
21
Captulo 2
Plano de ensino
2.1 Objetivo
Capacitar o usurio para o uso autnomo do html, bem como suas aplicaes e suas ferramentas mais utilizadas.
2.2 Pblico Alvo

Usurios nais ou novatos que desejarem aprender ou aprimorar seus conhecimentos em desenvolvimentos de sites com html.
2.3 Pr-requisitos
Os usurios devero ser, necessariamente, funcionrios pblicos e ter conhecimentos bsicos para operar um computador.
2.4 Descrio
O curso ser realizado na modalidade Educao a Distncia e utilizar a Plataforma Moodle como ferramenta de aprendizagem. O curso tem durao de quatro semanas e possui um conjunto de atividades (lies, fruns, glossrios, questionrios e outros) que devero ser executadas de acordo com as instrues fornecidas. O material didtico estar disponvel on-line de acordo com as datas pr-estabelecidas em cada tpico.
2.5 Metodologia
O curso est dividido da seguinte maneira:
2.5.1 Cronograma
Descrio das atividades
22
CDTC
Brasil/DF
Semana1 - O que Internet? Lio 1 - O que internet? Lio 2 - Introduo ao HTML Lio 3 - Documento bsico e seus componentes Lio 4 - Cabealhos, Separadores e Listas Semana 2 - Conhecimentos Bsicos Lio 5 - Formatao de texto e caracteres Lio 6 - Ligaes (uso de links) Lio 7 - Insero de Imagens Lio 8 - Tabelas Semana 3 - Conhecimentos Avandos Lio 9 - Frames Lio 10 - Interao Lio 11 - Audio e Vdeo Lio 12 - Folhas de estilo Como mostrado na tabela acima, a cada semana ser disponibilizado um conjunto de mdulos. recomendvel que o participante siga as datas estabelecidas. // As lies, disponveis em cada mdulo, contm o contedo principal. Elas podero ser acessadas quantas vezes forem necessrias, desde que esteja dentro da semana programada. Ao nal de uma lio, voc receber uma nota de acordo com o seu desempenho. Caso sua nota numa determinada lio for menor do que 6.0, sugerimos que voc faa novamente esta lio. // Ao nal do curso sero disponibilizadas as avaliaes referentes aos mdulos estudados anteriormente. Somente as notas das avaliaes sero consideradas para a nota nal. Todos os mdulos caro visveis para que possam ser consultados durante a avaliao nal. // Para conhecer as demais atividades de cada mdulo leia o tpico seguinte: "Ambientao do Moodle". // Os instrutores estar a sua disposio ao longo de todo curso. Qualquer dvida deve ser enviada ao frum correspondente. Diariamente os monitores daro respostas e esclarecimentos.
2.6 Programa
O curso oferecer o seguinte contedo: Como instalar, congurar e personalizar o ambiente desktop GNOME.
23
CDTC
Brasil/DF
2.7 Avaliao
Toda a avaliao ser feita on-line. Aspectos a serem considerados na avaliao: Iniciativa e autonomia no processo de aprendizagem e de produo de conhecimento; Capacidade de pesquisa e abordagem criativa na soluo dos problemas apresentados. Instrumentos de avaliao: Participao ativa nas atividades programadas. Avaliao ao nal do curso. O participante far vrias avaliaes referentes ao contedo do curso. Para a aprovao e obteno do certicado, o participante dever obter nota nal maior ou igual a 6.0 de acordo com a frmula abaixo: Nota Final = ((ML x 7) + (AF x 3)) / 10 = Mdia aritmtica das lies AF = Avaliaes
2.8 Bibliograa
HTML, SITE: http://www.icmc.usp.br/ensino/material/html/ HTML uma linguagem de marcao simples e eciente para a criao de pginas para a internet que possam ser interpretadas pelos browsers e exibidas na rede mundial de computadores. Ao nal do curso o aluno ser capaz de criar sites para internet e disponibilz-los para que possam ser vistos por usurios de todo o mundo.
24
Captulo 3
O que internet?
3.1 O que internet?
Estamos acostumados a ouvir que:Internet a "grande rede mundial de computadores". Entretanto, essa denio no exata. Na realidade, Internet "o conjunto de diversas redes de computadores que se comunicam atravs dos protocolos TCP/IP".
O hardware para conexo Internet

Para conexo discada, preciso ter um modem para comunicao com o provedor de acesso via linha telefnica comum. Para conexo dedicada ADSL, preciso ter uma placa de rede Ethernet 10/100 e um modem ADSL, alm de um separador de sinais do telefone e da transmissa de dados. Para conexo dedicada a cabo, preciso um cablemodem e tambm um separador de sinais de TV e dos dados. Para conexa dedicada wireless, preciso um receptor de microondas e uma antena externa para o acesso rede do provedor.
O software bsico para conexo Internet

Cada equipamento de hardware tem seus programas prprios para seu funcionamento. Alm do software associado ao hardware para conexo Internet, preciso ter pelo menos um browser (navegador) para se poder visitar os sites disponveis. Exemplos de browser (navegador): Netscape, Internet Explorer, Opera, Mozilla.
3.2 Protocolos
Assim como temos nossas regras sociais de comunicao (por exemplo, em uma palestra somente uma pessoa fala; em uma assemblia, so vrias as pessoas que falam e, mesmo assim, uma pessoa fala por vez), tambm os computadores precisam de algumas regras para trocar informaes. No caso da Internet, essas regras bsicas esto reunidas no conjunto de protocolos chamados TCP/IP. 25
CDTC
Brasil/DF
O protocolo IP
Na Internet cada computador tem um nmero IP prprio, assim como cada casa tem um endereo nico. Empresas que tm redes ligadas dia e noite na Internet possuem o que se chama acesso dedicado, isto as conexes de sua rede tm sempre um mesmo nmero IP na Internet. Quando temos acesso Internet atravs de um provedor, usamos o que se chama acesso discado, e nossa conexo com a Internet em geral ganha nmeros IP diferentes a cada acesso. Mesmo assim, quando nosso computador se conecta ao provedor, o nmero IP atribudo a ele nico em toda a Internet.
O protocolo TCP
Suponhamos que em dado computador existem vrios programas se comunicando atravs da rede em um mesmo instante - por exemplo, uma pgina da Web sendo carregada enquanto se verica a caixa postal. Como o computador "sabe"que a pgina da Web deve ir para o browser e os e-mails para o programa que l e-mails? Isso possvel porque cada programa em execuo recebe tambm seu endereo prprio dentro do computador: no caso de programas que se comunicam pela Internet, esse endereo o nmero TCP. Assim, continuando a comparao com endereos fsicos, suponhamos que seu computador um prdio de apartamentos com um dado nmero IP; seu browser e seu programa de e-mail seriam apartamentos distintos nesse prdio, cada qual com seu nmero TCP. Sobre TCP: Outros protocolos Veremos que, para cada tipo de recurso disponvel pela Internet, tambm existe um protocolo de comunicao especco, alm do TCP/IP.
3.3 Recursos da Internet

Recursos da Internet
E-mail Servio de intercmbio assncrono de mensagens, o "correio eletrnico"utiliza-se dos protocolos POP ou IMAP e SMTP. FTP Permite a transferncia de arquivos, pelo protocolo FTP - File Transfer Protocol. Sobre FTP: http://pt.wikipedia.org/wiki/File_Transfer_Protocol Telnet Permite a conexo e interao com computadores remotos, simulando um terminal, pelo protocolo telnet. Sobre Telnet: http://pt.wikipedia.org/wiki/Telnet Gopher Sistema precursor da World-Wide Web, utiliza o protocolo gopher para apresentar menus de navegao, documentos e imagens. Sobre Gopher: http://pt.wikipedia.org/wiki/Gopher
26
CDTC
Brasil/DF
3.4 O que World-Wide Web?

A World-Wide Web (tambm chamada Web ou WWW) em termos gerais, a interface grca da Internet. Ela um sistema de informaes organizado de maneira a englobar todos os outros sistemas de informao disponveis na Internet. Sua idia bsica criar um mundo de informaes sem fronteiras, prevendo as seguintes caractersticas: interface consistente; incorporao de um vasto conjunto de tecnologias e tipos de documentos; "leitura universal". Para isso, implementa trs ferramentas importantes: um protocolo de transmisso de dados - HTTP; um sistema de endereamento prprio - URL; uma linguagem de marcao, para transmitir documentos formatados atravs da rede HTML.
3.5 HTTP , URL , HTML

HTTP
Sigla que signica HyperText Transfer Protocol - Protocolo de Transferncia de Hipertexto. O HTTP o protocolo usado para a transmisso de dados no sistema World-Wide Web. Cada vez que voc aciona um link, seu browser realiza uma comunicao com um servidor da Web atravs deste protocolo.
URL
O sistema de endereamento da Web baseado em uma sintaxe chamada URI (Universal Resource Identier - Identicador Universal de Recursos). Os endereos que utilizamos atualmente so os URLs, que seguem essa sintaxe. URL signica Uniform Resource Locator - Localizador Uniforme de Recursos. Um exemplo de URL : http://cursos.cdtc.org.br/brasil/login/index.php Esse endereo identica: o protocolo de acesso ao recurso desejado (http); a mquina a ser contactada (cursos.cdtc.org.br); o caminho de diretrios at o recurso (brasil/login/)e o recurso (arquivo) a ser obtido (index.php).
27
CDTC
Brasil/DF
Atravs de URLs tambm acionamos programas (scripts), enviamos parmetros para esses programas, etc.
HTML
Sigla que signica HyperText Markup Language - Linguagem de Marcao de Hipertexto. No possvel programar em linguagem HTML, pois ela simplesmente uma linguagem de marcao: ela serve para indicarmos formataes para textos, inserir imagens e ligaes de hipertexto. Os browsers so os responsveis por identicar as marcaes em HTML e apresentar os documentos conforme o que foi especicado por essas marcaes.
28
Captulo 4
Introduo ao HTML
4.1 Introduo Linguagem HTML
HTML (HyperText Markup Language - Linguagem de Formatao de Hipertexto) fruto do "casamento"dos padres HyTime e SGML.
HyTime - Hypermedia/Time-based Document Structuring Language: Hy Time (ISO 10744:1992) - padro para representao estruturada de hipermdia e informao baseada em tempo. Um documento visto como um conjunto de eventos concorrentes dependentes de tempo (udio, vdeo, etc.), conectados por webs ou hiperlinks. O padro HyTime independente dos padres de processamento de texto em geral. Ele fornece a base para a construo de sistemas hipertexto padronizados, consistindo de documentos que aplicam os padres de maneira particular SGML - Standard Generalized Markup Language:Padro ISO 8879 de formatao de textos: no foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligaes. SGML no padro aplicado de maneira padronizada: todos os produtos SGML tm seu prprio sistema para traduzir as etiquetas para um particular formatador de texto. DTD - Document Type Denition - dene as regras de formataoo para uma dada classe de documentos. Um DTD ou uma referncia para um DTD deve estar contido em qualquer documento conforme o padro SGML. Portanto, HTML denido segundo um DTD de SGML. Todo documento HTML apresenta elementos entre parnteses angulares (< e >); esses elementos so as etiquetas (tags) de HTML, que so os comandos de formatao da linguagem. A maioria das etiquetas tem sua correspondente de fechamento: <etiqueta>...</etiqueta> Isso necessrio porque as etiquetas servem para denir a formatao de uma poro de texto, e assim marcamos onde comea e termina o texto com a formatao especicada por ela. Alguns elementos so chamados "vazios", pois no marcam uma regio de texto, apenas inserem alguma coisa no documento: 6 <etiqueta> 29
CDTC
Brasil/DF
Todos os elementos podem ter atributos: <etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta> HTML um recurso muito simples e acessvel para a produo de documentos. Nestes "captulos", ser possvel aprender grande parte de seus elementos.
4.2 Edio de documentos HTML

Os documentos em HTML so como arquivos ASCII comuns, que podem ser editados em vi, emacs, textedit, gedit , vim ou qualquer editor simples. Para facilitar a produo de documentos, existem editores HTML especcos: Editores de texto fonte:facilitam a insero das etiquetas, orientando o uso de atributos e marcaes. Ex.: Quanta Plus, Blue Fish,Screem, Mozilla Composer , Netscape Composer.
Editores WYSIWYG (What You See Is What You Get):oferecem ambiente de edio com "um"resultado nal das marcaes (pois o resultado nal depende do browser usado para visitar a pgina).Ex. Ginf, Amaya.
30
CDTC
Brasil/DF
Alm dos editores especcos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportao de seus documentos prprios para o formato HTML. O documento HTML produzido, normalmente ter extenso .html ou .htm.
4.3 Edio de documentos HTML

Publicao de documentos Para que uma pgina esteja permanentemente disponvel pela Web, ela precisa ter um endereo xo, alojada em um servidor. Existem vrios provedores de espao (hosting) gratuitos e tambm os provedores de acesso geralmente oferecem espao para os sites de seus assinantes. Sites com ns lucrativos geralmente so hospedados em provedores de espaos pagos. Denida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP ou por uma pgina de envio no prprio provedor de espao) e suas pginas j estaro disponveis para visitas.
31
Captulo 5
Documento bsico e seus componentes

5.1 A seo <HEAD>
<HEAD>contm informaes sobre o documento. O elemento <TITLE>, por exemplo, dene um ttulo, que mostrado no alto da janela do browser. Para denir como ttulo de uma pgina o texto "A seo >HEAD< - Tutorial HTML do CDTC", por exemplo, dever ser denido assim: <HEAD><TITLE>A seoo >HEAD< - Tutorial HTML do CDTC</TITLE></HEAD> Todo documento WWW deve ter um ttulo; esse ttulo referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prtica a importncia do ttulo, se voc adicionar esta pgina aos seus Favoritos (Bookmarks), o resultado ser semelhante a este:
Note que o ttulo da pgina se tornou a ncora de atalho para ela. Por isso sugerido que os ttulos dos documentos sejam sugestivos, evitando-se ttulos genricos como "Introduo". O 32
CDTC
Brasil/DF
ttulo tambm bastante signicativo para a listagem de uma pgina nos resultados de pesquisas nos catlogos da Internet. Alm do ttulo, <HEAD> contm outras informaes de importncia para os robs de pesquisa, indicadas nos campos <META>. Campos <META> Os campos <META> tm dois atributos principais: NAME, indicando um nome para a informao HTTP-EQUIV, que faz uma correspondncia com campos de cabealho do protocolo HTTP; a informao desse campo pode ser lida pelos browsers, e provocar algumas aes.
<HEAD> <TITLE>Ttulo do Documento</TITLE> <META NAME="nome" CONTENT="valor"> <META HTTP-EQUIV="nome" CONTENT="valor"> </HEAD>
Este documento, por exemplo, tem as seguintes informaes:
<HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1" > <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <TITLE>A seo \<HEAD\> - Tutorial HTML do CDTC</TITLE> <META NAME="Author" CONTENT="Maria Alice Soares de Castro - masc@icmc.usp.br"> <META NAME="Generator" CONTENT="Blue Fish">} <META NAME="Description" CONTENT="Manual de referncia para webdesigners e desenvolvedores de sites">} <META NAME="KeyWords" CONTENT="HTML, WWW, Webpublishing, Internet, Webdesign"> </HEAD>}
Alguns valores dos atributos META NAME so inseridos automaticamente por alguns editores, por exemplo: Generator e Author. Os campos Description e KeyWords ajudam a classicao da pgina em algumas ferramentas de busca. Essas informaes no tm qualquer efeito na apresentao da pgina, mas servem como uma explicao ou documentao sobre as informaes contidas nela. H poucos valores para META HTTP-EQUIV em uso. O mais comum content-type, que indica o conjunto de caracteres usado na pgina: essa informao ajuda o browser a exibir corretamente os caracteres especiais que estiverem presentes no texto. Um exemplo de uso comum do atributo HTTP-EQUIV promover a mudana automtica de pginas, atribuindo-lhe o valor Refresh. Veja este exemplo: http://cursos.cdtc.org.br/exemplos/refresh1.html Agora que voc voltou do exemplo, veja como esse efeito conseguido:
<HEAD> <TITLE> ... </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="segundos; URL= pagina.html"> </HEAD>
onde: pagina.html 33
CDTC
Brasil/DF
a pgina a ser carregada automaticamente segundos o nmero de segundos passados at que a pgina indicada seja carregada. Como foi comentado no exemplo, o efeito interessante, mas para que serve? Se no pensamos em uma nalidade til para esse efeito, camos na tentao de us-lo " toa". A aplicao mais utilizada a atualizao automtica de um documento que, por exemplo, tenha uma foto produzida por uma cmera de vdeo: pode-se forar, com o Refresh, a atualizao dessa pgina, mostrando para o leitor sempre uma imagem mais atual de algum evento sendo focalizado pela cmera. Outra utilizao em "chats", ou em pginas que desviem a navegao por documentos desenvolvidos para browsers avanados. Mais sobre META: http://www.htmlreference.com/META.htm
5.2 A seo <BODY>

Tudo que estiver contido em <BODY> ser mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios, animaes, vdeos, sons e scripts embutidos. Veja um documento bsico em HTML. Atributos de <BODY> Atravs de atributos de <BODY>, podemos denir cores para os textos, links e para o fundo das pginas, bem como uma imagem de fundo (marca dgua): <BODY BGCOLOR="#rrggbb"TEXT="#rrggbb"LINK="#rrggbb"ALINK="#rrggbb" VLINK="#rrggbb"BACKGROUND="URL onde: BGCOLOR cor de fundo (quando no indicada, o browser ir mostrar uma cor padro, geralmente o cinza ou branco; alguns editores podero estabelecer o branco para o fundo da pgina) TEXT cor dos textos da pgina (padro: preto) LINK cor dos links (padro: azul) ALINK cor dos links, quando acionados (padro: vermelho) VLINK cor dos links, depois de visitados (padro: azul escuro ou roxo) Seus valores so dados em hexadecimal, equivalentes a cores no padro RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface bem amigvel atravs da qual escolhemos as cores desejadas, sem nos preocuparmos com nmeros esdrxulos tais como #FF80A0 Browsers que seguem a denio de HTML 3.2 em diante, tambm aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porm, browsers mais antigos no apresentaro as cores indicadas. BACKGROUND indica o URL da imagem a ser replicada no fundo da pgina, como uma marca dgua. 34
CDTC
Brasil/DF
Para efeitos de design, possvel xar a imagem de fundo, para que ela no se mova junto com o texto ao se rolar a pgina ( BGPROPERTIES="FIXED"). Esse efeito no padro e funciona no Internet Explorer.
35
Captulo 6
Cabealhos, Separadores e Listas

6.1 Cabealhos
H seis nveis de cabealhos em HTML, de <H1> a <H6>: <H1>:Este um cabealho de nvel 1<H1>:<H2>:Este um cabealho de nvel 2<H2>: <H3>:Este um cabealho de nvel 3<H3>:<H4>:Este um cabealho de nvel 4<H4>: <H5>:Este um cabealho de nvel 5<H5>:<H6>:Este um cabealho de nvel 6<H6>: Esses cabealhos so mostrados da seguinte forma:
Este um cabealho de nvel 1

Aninhamento de cabealhos
Os cabealhos no podem ser aninhados, isto , a formatao: <H2>:Este <H1>:um cabealho de nvel 1<H1>: dentro de um cabealho de nvel 2<<H2>: pode produzir algum resultado prximo ao desejado:
Este
um cabealho de nvel 1
dentro de um cabealho de nvel 2
mas o mais comum que os browsers "entendam"essa formatao como sendo: <H2>:Este <H1>:um cabealho de nvel 1<H1>: dentro de um cabealho de nvel 2<<H2>: - ou seja, como se estivesse faltando uma etiqueta de fechamento de <H2> antes de <H1>, e faltando uma abertura de <H2> depois do fechamento de <H1>, oferecendo o seguinte resultado:
Este
um cabealho de nvel 1
dentro de um cabealho de nvel 2
Os editores WYSIWYG naturalmente no permitem o aninhamento de cabealhos.
36
CDTC
Brasil/DF
Alinhamento
Os cabealhos tm atributos de alinhamento: <H2 ALIGN=CENTER>Cabealho centralizado</H2> Cabealho centralizado <H3 ALIGN=RIGHT>Cabealho alinhado direita</H3> Cabealho alinhado direita <H4 ALIGN=LEFT>Cabealho alinhado esquerda (default)</H4> Cabealho alinhado esquerda (default)
6.2 Separadores
Como vimos no primeiro exemplo, as quebras de linha do texto fonte no so signicativas na apresentao de documentos em HTML. Para organizar os textos, precisamos de separadores, apresentados aqui.
Quebra de linha
Quando queremos mudar de linha, usamos o elemento <br>. Isso so necessrio quando queremos uma quebra de linha em determinado ponto, pois os browsers j quebram as linhas automaticamente para apresentar os textos. Com sucessivos <br>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que ser apresentado no item sobre insero de imagens.
Pargrafos
Para separar blocos de texto, usamos o elemento <P>: Pargrafo 1;<P>:Pargrafo 2. que produz: Pargrafo1; Pargrafo2. Combinando pargrafos e quebras de linha, temos: Pargrafo 1;<br>: linha 1 do pargrafo 1,<br>linha 2 do pargrafo 1.<br>Pargrafo 2;<br> linha 1 do pargrafo 2, <br>linha 2 do pargrafo 2. O resultado da marcao acima : Pargrafo 1; linha 1 do pargrafo 1, linha 2 do pargrafo 1. Pargrafo 2; linha 1 do pargrafo 2, linha 2 do pargrafo 2. 37
CDTC
Brasil/DF
<P>tem atributo de alinhamento, como os cabealhos: <P ALIGN=CENTER> Assim como os trens, as boas idias s vezes chegam com atraso. <BR>(Giovani Guareschi)</P> Assim como os trens, as boas idias s vezes chegam com atraso. (Giovani Guareschi) <P ALIGN=RIGHT> Como diz o provrbio chins: " melhor passar por ignorante uma vez do que permanecer ignorante para sempre".</P> Como diz o provrbio chins: " melhor passar por ignorante uma vez do que permanecer ignorante para sempre". <P ALIGN=LEFT>Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial.</P> Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial.
Linha Horizontal
<HR> insere uma linha horizontal. Essa linha tem diversos atributos, oferecendo resultados diversos. <HR SIZE=7> insere uma linha de largura 7 (pixels): <HR WIDTH=50%> insere uma linha que ocupa 50% do espao horizontal disponel: <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeito tridimensional: <HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada esquerda (o Netscape, aparentemente, no aceita esta formatao de <HR>):
6.3 Listas em HTML

H vrios tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:
Listas de Denio
Estas listas so chamadas tambm "Listas de Glossrio", uma vez que tm o formato: <DL> <DT>termo a ser denido <DD>denio <DT>termo a ser denido <DD>denio </DL> Que produz: termo a ser denido denio termo a ser denido denio 38
CDTC
Brasil/DF
Este tipo de lista muito utilizado para diversos efeitos de organizao de pginas, por permitir a tabulao do texto. Um exemplo so os ndices de navegao presentes nas pginas deste tutorial; outro exemplo a lista composta abaixo: <DL> <DT>Imperadores do Brasil: <DD>D. Pedro I <DL> <DD>Nome completo: Pedro de Alcntara Francisco Antnio Jos Carlos Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Seram de Bragana e Bourbon </DL> <DD>D. Pedro II <DL> <DD>Nome completo: Pedro de Alcntara Jos Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga </DL> </DL> Imperadores do Brasil: D. Pedro I Nome completo: Pedro de Alcntara Francisco Antnio Jos Carlos Xavier de Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Seram de Bragana e Bourbon D. Pedro II Nome completo: Pedro de Alcntara Jos Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga
Listas no-numeradas
Sa equivalentes s listas com marcadores do MS Word: <UL> <LI>item de uma lista <LI>item de uma lista, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item </UL> item de uma lista item de uma lista, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto item A diferena entre o resultado da marcao HTML e do Word est na mudana dos marcadores, assinalando os diversos nveis de listas compostas: 39
CDTC
Brasil/DF
<UL> <LI>Documentos bsicos <LI>Documentos avanados <UL> <LI>formulrios <UL> <LI>CGI </UL> <LI>contadores <LI>relgios </UL> <LI>Detalhes sobre imagens </UL> Documentos bsicos Documentos avanados o formulrios( + CGI ) o contadores o relgios Detalhes sobre imagens Essa lista pode ter marcadores diferentes, indicados atravs do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default): <UL TYPE=CIRCLE> <LI>um item <LI>mais um item </UL> um item mais um item Cada item tambm pode ter seu atributo especco: <UL> <LI TYPE=DISC>um item <LI TYPE=CIRCLE>mais um item <LI TYPE=SQUARE>ltimo item </UL> um item mais um item ltimo item </UL> um item mais um item 40
CDTC
Brasil/DF
ltimo item
Listas Numeradas
<OL> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item de lista numerada </OL> 1. item de uma lista numerada 2. item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto 3. item de lista numerada Estas listas no apresentam numerao em formato 1.1, 1.2 etc., quando compostas: 1 - Documentos ba?icos 2 - Documentos avanados 1 - formulrios 1 - CGI 2 - contadores 3 - relgios 2 - Detalhes sobre imagens Porm, atravs do atributo TYPE (HTML 3.2), pode-se lidar com a numerao dos itens: <OL TYPE=I> <LI>Documentos bsicos <LI>Documentos avanados <OL TYPE=a> <LI >formulrios <OL TYPE=i> <LI>CGI </OL> <LI>contadores <LI>relgios </OL> <LI>Detalhes sobre imagens </OL> I - Documentos bsicos II - Documentos avanados a. formulrios i. CGI b. contadores c. relgios III -item Detalhes sobre imagens Ainda segundo HTML 3.2, o atributo START pode indicar o incio da numerao da lista: <OL START=4 TYPE=A> 41
CDTC
Brasil/DF
<LI>um item <LI>outro item <LI>mais um item </OL> D. um item E. outro item F. mais um item
Listas e sub-listas
As listas podem ser aninhadas. Por exemplo: <DL> <DT>termo a ser denido <DD>denio <OL> <LI>item de uma lista numerada <LI>item de uma lista numerada <UL> <LI>item de uma lista </UL> <LI>item de uma lista numerada </OL> <DT>termo a ser denido <DD>denio </DL> termo a ser denido denio 1. item de uma lista numerada 2. item de uma lista numerada * item de uma lista item de uma lista numerada termo a ser denido denio
42
Captulo 7
Formatao de texto e caracteres

7.1 Formatao de textos e caracteres
H dois tipos de formatao em HTML: lgico e fsico. Os efeitos de apresentao na tela so os mesmos: o motivo da distino entre eles se deve idia bsica de independncia entre especicao e apresentao. Quando formatamos um trecho de texto como cabealho de nvel 1, no explicitamos se esse tipo de cabealho deve ser em alguma fonte determinada, em um tamanho determinado, justicado esquerda ou direita, ou centralizado. Esses detalhes de apresentao so deixados para o browser - o dispositivo de apresentao do documento - que pode ser congurado de acordo com o leitor (usurio nal). Desse modo, alm de facilitar muito o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentao de cabealhos, pargrafos, listas, etc. A formatao lgica segue o signicado lgico do texto marcado: um endereo de e-mail, uma citao etc. Sua apresentao nal varia conforme o browser, podendo oferecer resultados mais ricos. A formatao fsica especica explicitamente o estilo que se quer para o texto: itlico, grifado etc. Sua apresentao nal no sofre grandes variaes.
7.2 Blocos de texto

HTML oferece as seguintes formataes de blocos de texto:
<PRE>
Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulaes: <pre>uma linha aqui, outra ali, etc.</pre> Resulta em: uma linha aqui, outra ali, etc. 43
CDTC
Brasil/DF
Uma vez que <PRE> mantm o texto original, no se deve forar espaos com essa marcao dentro de outra marcao que j apresente tabulaes e espaos especcos. Veja este exemplo, que apresenta tambm alguns problemas com o uso de <PRE>.
<BLOCKQUOTE>
usado para citaes longas: <blockquote>A massa do Sol arqueia o espao-tempo de tal maneira que, ainda que a Terra siga uma trajetria reta no espao-tempo quadridimensional, parece-nos que se desloca em rbita circular no espao tridimensional.<blockquote> (Stephen W. Hawking, "Uma Breve Histria do Tempo") A massa do Sol arqueia o espao-tempo de tal maneira que, ainda que a Terra siga uma trajetria reta no espao-tempo quadridimensional, parece-nos que se desloca em bita circular no espao tridimensional. (Stephen W. Hawking, "Uma Breve Histria do Tempo")
<ADDRESS>
Usado para formatar endereos E-mail e referncias a autores de documentos: Envie crticas e sugestes para <address>ugozanchi@cdtc.org.br <address> Envie crticas e sugestes para ugozanchi@cdtc.org.br
7.3 Formatao de frases

Como visto anteriormente (em Formatao de texto e caracteres), HTML permite dois tipos de formatao: lgico e fsico; aqui veremos as formataes mais utilizadas:
Estilos Lgicos
<CITE> Para ttulos de livros, lmes, e citaes curtas. Exemplo:Assisti Guerra nas Estrelas umas oito vezes! <CODE> Para indicar trechos de cdigo de programas. Exemplo:for (x=0); cl &&(!feof(stdin)); x++)); <DFN> Indica denio de uma palavra, em geral apresenta o texto em itlico. Exemplo: CERN: Centre dstudes et Recherches Nucleaires <EM> nfase, tambm normalmente apresentado em itlico. Exemplo: preciso pesquisar muito para encontrar o termo exato. 44
CDTC
Brasil/DF
<KBD> Indica uma entrada via teclado. Exemplo: Para ler mensagens recebidas, digite pine -i <SAMP> Indica uma seqencia de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo: O resultado do primeiro applet Hello, World! <STRONG> Forte nfase, mostrado normalmente em negrito. Exemplo: Antes de enviar um e-mail, conra o campo "Subject:"! <VAR> Indica variveis, ou valores que o usurio dever escrever; geralmente mostrado em it?ico. Exemplo: No campo Login, escreva guest.
Estilos Fsicos
<B> Quando disponvel no browser, mostrado em negrito (em alguns browsers, pode aparecer sublinhado) <I> Itico (em alguns casos, caracteres inclinados) <TT> Tipo teletype - fonte de espaamento xo. <U> Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentao de links. <STRIKE> ou <S> Frase riscada. <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo ndice, como em H2 O. <SUP> Frase em estilo expoente, como em Km2
45
CDTC
Brasil/DF
7.4 Caracteres especiais

HTML permite que caracteres especiais sejam representados por seqencias de escape, indicadas por trs partes: um & inicial, um nmero ou cadeia de caracteres correspondente ao caractere desejado, e um ";"nal. Quatro caracteres ASCII - <, >, e & tm signicados especiais em HTML, e so usados dentro de documentos seguindo a correspondncia: Entidade < > & Caracter < > &
Outras seqencias de escape suportam caracteres ISO Latin1. Aqui est uma tabela com os caracteres mais utilizados em Portugus: Entidade á â à ã ç é ê í ó ô õ ü ú Á Â À Ã Ç É Ê Í Ó Ô Õ Ú Ü Caracter
Como vemos, as seqencias de escape so sensveis caixa. Os editores de HTML fazem essa traduo automaticamente.
46
CDTC
Brasil/DF
Alguns editores, no entanto, mantm a acentuao, sem usar as entidades de formatao. Quando isso acontece, deve-se inserir uma indicao do esquema de codicao ISO Latin1, escrevendo:
<HTML> <HEAD> <TITLE>...</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> </HEAD> ...

Existem alguns smbolos que veem sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo, ©, que o smbolo de copyright, ® para Marca registrada, e § para pargrafo. Tambm se pode usar seqencias com cdigos ASCII, por exemplo: ¿Qu pasa, seor? Qu pasa, seor?
7.5 Cores e fontes Cores

As cores so introduzidas atravs do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos na seo <BODY>): <FONT COLOR="#rrggbbTexto</FONT> Assim, um trecho de texto pode ter uma cor diferente da denio geral de cores, feita atravs dos atributos de <BODY>.
Tamanho
A formatao <FONT SIZE=tamanho_da_letra>Texto</FONT> permite que o autor do documento altere o tamanho das letras em trechos especcos de texto. O tamanho bsico dos textos 3. Podemos indicar tamanhos relativos a esse, por exemplo: <FONT SIZE=+2>Letra maior</FONT> Letra normal <FONT SIZE=-2>Letra menor</FONT>
Letra maior Letra normal Letra menor

Fontes
Uma evoluo que permite a escolha da fonte para os textos o atributo FACE: 47
CDTC
Brasil/DF
<FONT FACE="fonte_da_letraTexto</FONT> Por exemplo: <FONT FACE="Verdana"COLOR="#0000AAFonte Verdana azul</FONT> Fonte Verdana azul <FONT FACE="Courier New"COLOR="#AA0000Fonte Courier New vermelha</FONT> Fonte Courier New vermelha
7.6 Marquee
possvel obter o efeito de animao de texto, atravs da formatao <MARQUEE>. <MARQUEE BEHAVIOR=efeito>Texto</MARQUEE> Atributos de largura e direo do efeito permitem diversas apresentaes diferentes. Por exemplo (o efeito s executado no Internet Explorer e em verses recentes do Netscape - e de maneiras diferentes): <MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE> Texto <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE> Texto <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE> Texto
48
Captulo 8
Ligaes (uso de links)

8.1 Ligaes (uso de links)
Com HTML possvel fazer ligaes de uma regia de texto (ou imagem) a um outro documento. Nestas pginas, temos visto exemplos dessas ligaes: o browser destaca essas regies e imagens do texto, indicando que sa ligaes de hipertexto - tambm chamadas hypertext links ou hiperlinks ou simplesmente links. Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: <A HREF = "arq_destinoncora</A> onde: arq_destino o URL do documento de destino; ncora o texto ou imagem que servir de ligaao hipertexto do documento, sendo apresentado para o documento de destino. Ex: <A HREF = "http://www.google.com.brSite do Google</A> Que ter o seguinte resultado: Site do Google
Atributos
<A> tem vrios atributos, utilizados de acordo com a ao associada ao link. Os mais usados so: HREF: Indica o arquivo de destino da ligao de hipertexto. TARGET:Indica o frame em que ser carregado o arq_destino. Maiores detalhes na seo sobre frames. NAME: Marca um indicador, isto , uma regio de um documento como destino de uma ligao.
49
CDTC
Brasil/DF
8.2 Caminhos (uso de links)

Os links podem estar indicados como caminhos relativos ou absolutos.
Caminho relativo
O caminho relativo pode ser usado sempre que quisermos fazer referncia a um documento armazenado no mesmo servidor do documento atual. Atravs do campo de endereo do browser, vemos que este documento est localizado em um diretrio /brasil do servidor cursos.cdtc.org.br . Para escrevermos um link deste documento para o documento doc2.html no diretrio /brasil/login, tudo que precisamos fazer escrever: Veja o <A HREF="login/doc2.htmlexemplo de caminho relativo</A>. que apresentado como: Veja o exemplo de caminho relativo.(http://cursos.cdtc.org.br/exemplos/doc2.html) Da mesma forma, se quisermos um link deste documento para um outro que esteja em diretrio diferente neste mesmo servidor, escrevemos, por exemplo: <A HREF="/chileCDTC-Chile</A> que produz o link: CDTC-Chile(http://cursos.cdtc.org.br/chile/) Para usar links com caminhos relativos preciso, portanto, conhecer a estrutura do diretrio do servidor no qual estamos trabalhando. Quando h alguma dvida, o melhor usar o caminho absoluto.
Caminho absoluto
Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo: <A HREF="http://cursos.cdtc.org.br/paraguayCDTC-Paraguai</A> que oferece um link para um documento no servidor WWW do CDTC-Paraguai: CDTC-Paraguai(http://cursos.cdtc.org.br/paraguay) Com a mesma sintaxe, possvel escrever links para qualquer servidor de informaes da Internet.
8.3 Indicadores (uso de links)

Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligao hipertexto. 50
CDTC
Brasil/DF
A formatao: <A NAME="inicioIndicadores (uso de links)</A> faz com que a ncora Indicadores (uso de links) seja o destino de um link. Se escrevermos: <A HREF="#inicioTopo do documento</A>. teremos uma ligao hipertexto para um trecho deste mesmo documento.
51
Captulo 9
Insero de Imagens
9.1 Insero de imagens
O elemento IMG insere imagens que so apresentadas junto com os textos. Um atributo SRC deve estar presente, da seguinte forma: <IMG SRC="URL_imagem onde URL_imagem o URL do arquivo que contm a imagem que se quer inserir; pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, no conveniente). Assim, escrevendo: <IMG SRC = "/icones/newred.gif inserimos a gura no documento.
As imagens usadas na Web so armazenadas em arquivos com extenso *.gif, *.xbm, *.jpg (ou *.jpeg), *.png.
9.2 Atributos bsicos de imagem ALT

Indica um texto alternativo (descrevendo brevemente a imagem) que apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers grcos. recomendvel que esteja sempre presente.
<IMG SRC="URL_imagem"ALT="descrio_da_imagem Dessa forma, <IMG SRC="/icones/newred.gif" apresentado nos browsers grcos assim: e, nos browsers texto, assim:
WIDTH e HEIGHT
52
CDTC
Brasil/DF
Atributos de dimenso da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a insero de uma imagem. <IMG SRC="imagem"ALT="descrio"WIDTH="largura"HEIGHT="altura Uma das vantagens de se usar esses atributos que o browser pode montar mais rapidamente as pginas, por saber de antemo o espao que dever ser reservado a elas.
BORDER
Quando uma frase marcada como ncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de ncora, ganha uma borda que indica sua condio. Por exemplo: Porm, por questes de apresentao, nem sempre interessa ter essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe. Se quisermos uma borda mais larga... <A HREF="URL<IMG SRC="imagem"ALT="descrio"BORDER=4></A> Se quisermos uma imagem sem borda... <A HREF="URL<IMG SRC="imagem"ALT="descrio"BORDER=0></A> Essa borda pode ser apresentada tambm em imagens que no so ncora de links. Basta aplicar, por exemplo, a formatao <IMG SRC="icones/fotoicm.gif"ALT="Foto antiga do ICMC"BORDER=2> Assim, possvel dar mais destaque a uma imagem, sem ser necessrio edit-la:
Foto original
53
CDTC
Brasil/DF
Foto com borda gerada por HTML
ALIGN
<IMG SRC="imagem"ALT="descrio"ALIGN=alinhamento> Existem tambm atributos de alinhamento, que produzem os seguintes resultados: ALIGN=TOP: Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado no seja muito bom. ALIGN=MIDDLE: Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado no seja muito bom; ALIGN=BOTTOM: Alinha o texto adjacente com a parte de baixo da imagem (default) ALIGN=RIGHT : Alinha a imagem direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. ALIGN=LEFT : Alinha a imagem esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.
Para ter duas imagens, uma em cada margem, numa mesma linha, escreva: <IMG align=left SRC="imagem.gif"alt="imagem<IMG align=right SRC="imagem.gif"alt="imagem ...e se pode escrever vontade entre as imagens! Isso resulta em:
...e se pode escrever vontade entre as imagens!
Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento. Ou seja: Suponhamos um texto mais ou menos curto, que desejamos colocar aqui, com a imagem ilustrativa... ...mas gostaramos que este trecho j estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, na seria possvel usar o alinhamento TOP. 54
CDTC
Brasil/DF
Para conseguir isso, seria necessrio incluir diversos <BR> consecutivos, inserindo linhas em branco; mesmo assim, o resultado nal poderia ser bem pouco elegante. Surgiu, ento, o atributo CLEAR para <BR>. Com esse atributo, podemos, por exemplo ter um texto posicionado no ponto em que a margem direita ca livre, com <BR CLEAR=RIGHT>, ou no ponto em que a margem esquerda ca livre, com <BR CLEAR=LEFT> Dessa maneira, podemos controlar bem a posio relativa dos textos. Tambm se pode posicionar o texto no ponto em que ambas as margens esto livres. Isso conseguido com <BR CLEAR=ALL> E, assim, vimos tudo sobre quebras de linha depois de imagens!
ISMAP
Qualquer imagem pode funcionar como uma ncora de link, como vimos no item sobre bordas. ISMAP indica quando uma imagem deve ser tratada como um mapa clicvel, isto quando cada pixel de uma imagem pode ser considerado uma ncora para algum arquivo especco. Os mapas sero apresentados com detalhes na seo de assuntos avanados, sob o item Interao.
9.3 Molduras de imagem

Para melhorar ainda mais a apresentao das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos denem o espao - vertical e horizontal - deixado entre as imagens e os textos circundantes: <IMG SRC="imagem"VSPACE=espao_vertical> <IMG SRC="imagem"HSPACE=espao_horizontal> O efeito desses atributos o seguinte: as imagens no tm atributos de moldura ( fcil notar como o texto ca "grudado"na imagem) Neste segundo exemplo so usadas, respectivamente, as formataes: <IMG SRC="icones/fotoicm.gif"WIDTH="148"HEIGHT="95"ALIGN=left VSPACE="30 e <IMG SRC="icones/smallpos.gif"WIDTH="160"HEIGHT="71"ALIGN=right HSPACE="30 <IMG SRC="icones/earth.gif"ALIGN="LEFT"WIDTH="63"HEIGHT="68"HSPACE="20"VSPACE="20 Em suma, uso de vspace , hspace , width e height servem respectivamente para alterar: espao vertical e espao horizontal entre a gura e o texto. Largura e altura da imagem.
55
Captulo 10
Tabelas
10.1 Tabelas
A formatao de tabelas foi adotada bem antes de sua incluso na denio de HTML. A manipulao de tabelas, mesmo em editores, trabalhosa; a maior diferena entre tabelas em HTML e em editores como o MS Word, entretanto, o fato das tabelas em HTML serem denidas apenas em termos de linhas e no de colunas. Mas isso ser percebido no decorrer destas pginas. As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas possvel, por exemplo, termos estas pginas do tutorial organizadas em colunas, sendo uma delas reservada aos links de navegao dentro de cada seo. Tabelas implementam um conceito importante de layout: as "grades", segundo as quais organizamos textos e ilustraes de maneira harmoniosa. Como j foi possvel perceber, as tabelas contm textos, listas, pargrafos, imagens, formulrios e vrias outras formataes - inclusive outras tabelas. Novas verses de HTML e de browsers populares vo acrescentando diversos atributos s tabelas, e nosso objetivo aqui saber lidar com a maioria desses recursos disponveis.
10.2 Elementos bsicos de tabelas

<TABLE>...</TABLE> delimita uma tabela. Um atributo bsico BORDER, que indica a apresentao da borda. <TABLE BORDER="borda ... </TABLE>
Ttulos, linhas e elementos

<CAPTION>...</CAPTION> dene o ttulo da tabela <TR>...</TR> delimita uma linha 56
CDTC
Brasil/DF
<TH>...</TH> dene um cabealho para colunas ou linhas (dentro de <TR>) <TD>...</TD> delimita um elemento ou clula (dentro de <TR>) Uma tabela simples: <TABLE BORDER=4> <CAPTION>Primeiro exemplo</CAPTION> <TR><TH>oluna 1</TH><TH>Coluna 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> </TABLE> Primeiro exemplo Linha1 coluna1 Linha2 coluna1 Linha1 coluna2 Linha2 coluna2
Ttulos compreendendo mais de uma coluna ou linha

possvel englobar colunas e linhas, atravs dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): <TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>tres linhas</TD></TR> </TABLE>
Linha1 coluna1 Linha2 coluna1 3 linhas
Linha1 coluna2 Linha2 coluna2 uma linha duas linhas tres linhas
Neste exemplo, vemos que o cabealho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabealho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
Tabelas sem borda

As pginas deste tutorial foram construdas com tabelas sem borda. Para tanto, foi empregada a seguinte delarao: 57
CDTC
Brasil/DF
<TABLE BORDER="0 ... </TABLE>
10.3 Alinhamento em tabelas

Este exemplo servir para estudarmos alinhamentos, controle de larguras e espaamento em tabelas:
O contedo informativo, porm a apresentao no agradvel devido disposio do texto na tabela. Primeiro, vamos mexer com os alinhamentos.
Alinhamentos simples
Os alinhamentos padro em tabelas, como podemos ver no exemplo acima, so: no sentido horizontal: alinhamento esquerda no sentido vertical: alinhamento no centro da clula As linhas e clulas podem ter alinhamentos denidos atravs dos atributos: ALIGN = alin_horizontal VALIGN = alin_vertical Vejamos como esses alinhamentos funcionam nas clulas: <TD ALIGN=alin_horizontal><img src="imagem.jpg</TD> <TD VALIGN=alin_vertical>Texto da clula</TD>
58
CDTC
Brasil/DF
Obs.: a tabela acima foi feita especialmente para mostrar as diferenas entre os alinhamentos. Uma tabela comum ajusta o tamanho de suas clulas ao contedo, x desta forma:
Alinhamentos combinados
Uma mesma clula pode ter atributos ALIGN e VALIGN: <TD ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da clula</TD> Por exemplo:
Alinhamentos de linhas
O alinhamento pode ser aplicado linhas inteiras, com: <TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da clula</TR> Porm, o alinhamento declarado em uma clula prevalece sobre o alinhamento da linha, como se v no exemplo:
10.4 Atributos de largura

No item anterior, foi comentado que uma tabela comum ajusta o tamanho de suas clulas ao contedo. Por exemplo: Janeiro Abril Fevereiro Maio Maro Junho
Para apresentar uma tabela ocupando determinado espao disponvel na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado tambm a linhas e clulas. 59
CDTC
Brasil/DF
Essa largura pode ser denida em porcentagem (do espao disponvel): WIDTH=x% ou em pixels: WIDTH=x Ex.1: Tabela ocupando 50% do espao disponvel <TABLE BORDER=1 width=50%>
. Ex.2: Tabela ocupando 50% do espao disponvel, com uma coluna de 60% do espao disponvel na tabela
. <TABLE BORDER=1 width=50%> <TR> <TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>maro</TD> </TR> <TR> <TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD> </TR> </TABLE>
. Ex3.: O controle da largura da tabela est limitado dimenso de seu contedo: <TABLE BORDER=1 width=50%> <TR> 60
CDTC
Brasil/DF
<TD>janeiro</TD><TD width=1%>fevereiro</TD><TD>maro</TD> </TR> <TR> <TD>abril</TD><TD width=1%>maio</TD><TD>junho</TD> </TR> </TABLE>
. De volta ao exemplo inicial, j podemos melhorar um pouco mais nossa tabela. Mantendo os alinhamentos denidos na seo anterior, aplicaremos atributos de largura:
10.5 Atributos de espaamento

Dois atributos permitem o controle de espaamento em tabelas: CELLPADDING - espao entre o texto e as bordas da clula CELLSPACING - espao entre clulas Tomemos a mesma tabela simples da seo anterior: Janeiro Abril Ex.1: Espao entre o texto e as bordas <TABLE BORDER=1 CELLPADDING=20> 61 Fevereiro Maio Maro Junho
CDTC
Brasil/DF
. Assim, damos mais uma mexida na tabela inicial:
10.6 Extenses de tabelas

Diversas extenses de tabelas possibilitam a apresentao de timos efeitos nas pginas.
Cor de fundo
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9
. <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10> <TR><TD BGCOLOR="#E1FFD9janeiro</TD><TD>fevereiro</TD> <TD BGCOLOR="#E1FFD9maro</TD></TR> <TR><TD>abril</TD><TD BGCOLOR="#E1FFD9maio</TD><TD>junho</TD></TR> </TABLE>
Cor de borda
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9"BORDERCOLOR="#00F 62
CDTC
Brasil/DF
. <TABLE BORDER="1"CELLSPACING="0"CELLPADDING=10 BORDERCOLOR="#00FF00 <TR> <TD bgcolor="#E1FFD9janeiro</TD><TD>fevereiro</TD> <TD bgcolor="#E1FFD9maro</TD> </TR> <TR> <TD>abril</TD><TD bgcolor="#E1FFD9maio</TD><TD>junho</TD> </TABLE>
Imagem de fundo
<TABLE BORDER=5 BACKGROUND="imagem
. <TD BACKGROUND="imagem
63
Captulo 11
Frames
11.1 Frames
Os frames so divises da tela do browser em diversas telas (ou "quadros"). Com isso, tornase possvel apresentar mais de uma pgina por vez: por exemplo, um ndice principal em uma parte pequena da tela, e os textos relacionados ao ndice em outra parte. muito fcil colocar frames em pginas; porm, nem todos os usurios gostam deles, pois nem sempre a navegao fcil, alm de problemas para a impresso e a marcao dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames so as tabelas. Uma pgina com frames tem um texto fonte semelhante a: <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80% <FRAME SRC="indice1.html <FRAME SRC="apresenta.html"NAME="principal <NOFRAME> <BODY> <H2>Bem-vindo pgina do assunto X!</h2> <P> Blblblblbl blblblblbl </BODY> </NOFRAME> </FRAMESET> </HTML> A parte FRAMESET dene a diviso da pgina em "quadros". Neste exemplo, a pgina ser dividida em duas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela. Dentro da formatao de FRAMESET, temos os FRAME SRC, que so referncias s pginas que sero mostradas nos frames denidos.
64
CDTC
Brasil/DF
Assim, no cdigo acima vemos que a pgina indice1.html ser mostrada na primeira coluna (que ocupar 20% da tela), e a pgina apresenta.html ser mostrada na segunda (ocupando 80% da tela). Veja o exemplo no link: http://cursos.cdtc.org.br/exemplos/frame1.html A formatao de frames inclui tambm uma parte NOFRAME, que mostrada normalmente pelos browsers que no suportam sua apresentao.
11.2 Links com Frames

Sempre que se aciona um link dentro de uma pgina, o default (isto , o comportamento padro) que a pgina referente a esse link seja carregada na mesma janela da pgina anterior. No exemplo visto com frames, seguir um link dentro da janela direita faz com que a pgina apontada seja mostrada ocupando a janela da direita (coluna de 80%): <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80% <FRAME SRC="indice1.html <FRAME SRC="apresenta.html"NAME=principal> <NOFRAME> <BODY> <H2>Bem-vindo pgina do assunto X!</h2> <P> Blblblblbl blblblblbl </BODY> </NOFRAME> </FRAMESET> </HTML> Veja no cdigo fonte acima que o frame associado a apresenta.html tem um atributo NAME. Nomear um frame permite que direcionemos o frame em que ser apresentado o documento de destino de um link. No exemplo visto, o arquivo indice1.html tem um link da seguinte forma: <a href="apresenta2.html"target=principal>Exemplo n.2</a>. Isto indica que se est denindo (pelo atributo target) o frame em que a pgina de destino do link (apresenta2.html) ser mostrada. Se voc no entendeu como funciona esse mecanismo de direcionamento, veja o exemplo no link http://cursos.cdtc.org.br/exemplos/frame2.html e teste todos os links para vericar o 65
CDTC
Brasil/DF
que foi dito neste item, pois a descrio desse mecanismo pode car muito confusa!! %-/
11.3 Composio com Frames

Como j foi possvel observar, a formatao FRAMESET tem atributos que denem a diviso do espao da janela do browser em colunas ou linhas. Podemos utilizar uma combinao de "framesets"para criar diversos modos de apresentao do contedo de um site. Antes de ver algumas composies, lembre-se de que os pontos-chave para o mecanismo dos frames so estes, mostrados no item anterior: a nomeao dos frames; a declarao dos targets dos links, que denem o frame no qual as pginas de destino sero mostradas. Embora quase todos os editores WYSIWYG de HTML dm suporte criao de frames, necessrio que o autor se preocupe com os detalhes de nomeao de frames e direcionamento de links. Como montar dois frames em coluna:
Dois frames em linha:
Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha:
66
CDTC
Brasil/DF
Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em linha e compor a segunda linha com dois frames em coluna:
O exemplo simples visto at agora segue o modelo da primeira composio (em colunas). As composies com mais de um frameset precisam ser bem planejadas para funcionarem de maneira adequada.
11.4 Atributos de Frames

At este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME). Outros atributos permitem um maior controle sobre a apresentao: Eliminao das bordas dos frames: <FRAMESET COLS="20%, 80%"FRAMEBORDER="no <FRAME SRC="indice4.html <FRAME SRC="apresenta4.html"NAME="principal </FRAMESET> Frame sem barra de rolagem: <FRAMESET COLS="20%, 80% <FRAME SRC="indice4.html"SCROLLING="no <FRAME SRC="apresenta4.html"NAME="principal </FRAMESET> Veja o exemplo no link: http://cursos.cdtc.org.br/exemplos/frame4.html bom lembrar que a barra de rolagem de um frame ca sempre direita; no possvel, atualmente, mudar essa caracterstica. Aplicaes de Frames e Cuidados Frames so interessantes para apresentar conjuntos de pginas com um ndice xo para a navegao. Alm disso, torna-se possvel mostrar diversas pginas e/ou mdias em uma nica janela do browser. Um cuidado procurar controlar bem a navegao, evitando que o acionamento de links leve o 67
CDTC
Brasil/DF
leitor a ver seu browser criar frames dentro de frames, gerando uma grande confuso (veja item seguinte, sobre "limpar"a tela). Veja um exemplo de confuso com frames no link: http://cursos.cdtc.org.br/exemplos/frame9.html
Limpando a tela H basicamente dois efeitos possveis para limpar a apresentao de frames, e isso feito com "targets"especiais : TARGET="_top"limpa os frames que estiverem ativos, apresentando a pgina de destino na tela inteira, TARGET="_blank"abre uma nova janela do browser para apresentar a pgina de destino.
68
Captulo 12
Interao
12.1 Interao
A interao realizada de duas formas diferentes: 1. atravs de programas executados/interpretados pelo browser (isto ,do lado do cliente); 2. atravs de programas executados pelo servidor HTTP. Conforme a aplicao, apenas um destes tipos de interao pode ou deve ser utilizado.
12.2 Mapas
Mapas clicveis executados pelo servidor (server-side imagemaps)
Um primeiro mtodo para criao de mapas usando a comunicao com o servidor HTTP. Os servidores WWW tm um programa que lida com a relao entre coordenadas de imagens e URLs. No servidor NCSA, esse programa o imagemap, no CERN o htimage. No servidor Apache, o mdulo imagemap j vem embutido mas sua ativao deve ser congurada. Escolhida a imagem que servir de base de partida de diversos links para outros documentos, preciso gerar um arquivo relacionando coordenadas da imagem a determinados links. Essas coordenadas so encontradas por meio de programas de manipulao de imagens ou pelo prprio editor de HTML. Um arquivo .map (do servidor NCSA), tem o contedo organizado da seguinte forma: Forma default rect circle URL associada /nada.html http://www.usp.br/ http://www.intermidia.icmc.usp.br/ Coordenadas 15,8 135,39 306,204 7
Um arquivo .conf (do servidor CERN), tem o contedo organizado da seguinte forma:
69
CDTC
Brasil/DF
Forma default rect circle
Coordenadas 15,8 135,39 306,204 7
URL associada /nada.html http://www.usp.br/ http://www.intermidia.icmc.usp.br/
Ambos arquivos signicam a mesma coisa: 1. a regio da gura, compreendida pelo retngulo (rect) de coordenadas (15,8) e (135,39), funciona como um link para o URL http://www.usp.br/; 2. a regio da gura, compreendida pelo crculo (circle ou circ) de centro (306,204) e raio 7 um link para o URL http://www.intermidia.icmc.usp.br/; 3. se o mouse no for acionado em nenhuma dessas duas regies previstas, o link ser dirigido para o arquivo default - neste exemplo, o nada.html O formato desses arquivos para guras clicveis pode variar, mas basicamente, eles contm esses mesmos elementos: default - indica um endereo padro para quando o mouse for acionado em uma rea da gura alm das previstas pelo autor; circle ou circ - declara um crculo na gura; os pontos indicam o centro e um ponto de fronteira do crculo; poly - um polgono; cada coordenada declarada um vrtice; rect - um retngulo; as coordenadas declaradas so, respectivamente, do vrtice esquerdo superior e vrtice direito inferior. To logo seu arquivo fazclic.map esteja pronto, seu mapa sensvel deve ser declarado da seguinte maneira: <A HREF="http://www.host.br/fazclic.map<IMG SRC="mapa.gif"ISMAP></A> onde: http://www.host.br/fazclic.map - o endereo para o arquivo .map que contm as diretivas que associam regies da gura a referncias WWW; mapa.gif - a gura que ir "funcionar"como mapa clicvel.
O servidor HTTP deve estar congurado para reconhecer os arquivos .map como diretivas de execuo de mapas clicveis, para fazer a correspondncia entre as coordenadas de um pixel e o caminho de um arquivo. Se essa congurao no estiver ativa, ou faltarem arquivos que permitem esse recurso, o resultado de se acionar o mouse sobre um mapa clicvel ser apenas o de se obter o cdigo fonte do arquivo .map; o URL desse resultado ser o endereo do arquivo .map, seguido pela coordenada do pixel sobre o qual o mouse foi acionado. Exemplo de um arquivo mapa.map, para a gura abaixo:
70
CDTC
Brasil/DF
#Pagina da Graduacao rect exemplos/grad.html 0,0 130,45 #Pagina do Mestrado rect exemplos/mestr.html 133,0 230,45 #Pagina do Doutorado rect exemplos/dout.html 234,0 364,45
. Esta formatao declara a imagem acima como mapa clicvel: <A HREF="mapa.map<IMG SRC="icones/cursos.gif"ISMAP BORDER=0></A> Como nosso servidor no est congurado para executar mapas, somente abaixo temos um exemplo ativo, executado pelo cliente (o browser).
Mapas clicveis executados pelo cliente (client-side imagemaps)

Com o client-side imagemap, os mapas sensveis so rastreados pelo browser no momento em que o usurio escolhe um ponto na imagem. Dessa forma, o servidor j recebe uma requisio de um documento, pois as coordenadas do ponto escolhido e o arquivo correspondente j foram identicados pelo browser. Na verdade, a relao coordenadas-documentos continua existindo, mas agora em vez de estar em um arquivo .map separado, est dentro do prprio documento. Preste ateno ao conjunto de atributos necessrios para que o mapa funcione: <MAP NAME="nomemapa <AREA SHAPE="forma1"HREF="arq1.html"COORDS="x1,y1,x2,y2 <AREA SHAPE="forma2"HREF="arq2.html"COORDS="x3,y3,x4,y4 </MAP> <IMG SRC="imagem.gif"USEMAP="#nomemapa Neste exemplo, transformamos a barra da gura anterior em mapa sensvel: <map name="mapname <area shape="rect"href="exemplos/grad.html"COORDS="0,0,130,45 <area shape="rect"href="exemplos/mestr.html"COORDS="133,0,230,45 <area chape="rect"href="exemplos/dout.html"COORDS="234,0,364,45 </map> <img src="icones/cursos.gif"USEMAP="#mapname"border=0>
71
CDTC
Brasil/DF
12.3 Formulrios
Um formulrio um modelo para a entrada de um conjunto de dados. O primeiro passo para fazer formulrios aprender as etiquetas que desenham as janelinhas de entrada de dados, para depois trabalharmos com os scripts, que so os programas que tratam esses dados, oferecendo os servios desejados (acesso a banco de dados, envio de e-mail, etc). O elemento <FORM> delimita um formulrio e contm uma seqncia de elementos de entrada e de formatao do documento.
<FORM ACTION="URL_de_script"METHOD=mtodo>...</FORM>
Os atributos de FORM que nos interessam agora so:
ACTION: Especica o URL do script ao qual sero enviados os dados do formulrio. METHOD: Seleciona um mtodo para acessar o URL de ao. Os mtodos usados atualmente
so GET e POST. Ambos os mtodos transferem dados do browser para o servidor, com a seguinte diferena bsica: POST os dados entrados fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados. GET os dados entrados fazem parte do URL (endereo) associado consulta enviada para o servidor; suporta at 128 caracteres.
Veremos maiores detalhes sobre mtodos no item CGI http://www.icmc.usp.br/ensino/material/html/cgi FORM tambm pode apresentar o atributo:
ENCTYPE
Indica o tipo de codicao dos dados enviados atravs do formulrio. O tipo default application/xwww-form-urlencoded. Outro tipo aceito por alguns browsers text/plain. Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens - exceto outros formulrios. Em especial, colocamos dentro da marcao de <FORM> as formataes para campos de entrada de dados, que so trs: <INPUT>, <SELECT> e <TEXTAREA>. Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, que ser utilizado posteriormente pelo script. So os scripts que organizam esses dados de entrada em um conjunto de informaes signicativas para determinado propsito. Primeiro vamos ver os tipos de campos para montar um formulrio, e depois passaremos aos scripts. 72
CDTC
Brasil/DF
12.4 INPUT
O campo <INPUT> tem um atributo TYPE, ao qual atribumos seis valores diferentes para gerar seis tipos diferentes de entrada de dados.
Campo de dados texto

Quando INPUT no apresenta atributos, assumido que TYPE=TEXT (default); a formatao: Nome: <INPUT TYPE=TEXT NAME="Nome ou apenas: Nome: <INPUT NAME="Nome produz o resultado: Nome:
Campo de dados senha

Entrada de texto na qual os caracteres so escondidos por asteriscos, como se pode ver no exemplo. Login: <INPUT TYPE=TEXT NAME=login><br> Password: <INPUT TYPE=PASSWORD NAME="senha Login: Password:
Alguns atributos para os campos de tipo TEXT e PASSWORD

VALUE pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usurio no preencher este campo, ser adotado este valor padro. Se o usurio quiser entrar com dados, ele simplesmente apaga o que j estiver escrito e escreve suas informaes. Nome: <INPUT TYPE=TEXT NAME="nome"VALUE="Seu nome Nome: SIZE especica o tamanho do espao no display para o campo do formulrio. S vlido para campos TEXT e PASSWORD. O valor default (padro) 20. Endereo: <INPUT TYPE=TEXT SIZE=35> Endereo: MAXLENGHT o nmero de caracteres aceitos em um campo de dados; este atributo s vlido para campos de entrada TEXT e PASSWORD. Dia do ms: <INPUT TYPE=TEXT NAME="ex"MAXLENGHT=2> 73
CDTC
Brasil/DF
produz o resultado: Dia do ms: Apenas 2 caracteres sero lidos pelo formulrio, no importa o quanto se escreva neste campo.
Mltipla escolha
CHECKBOX insere um boto para escolha de opes. A cada alternativa corresponde um valor a ser manipulado pelo script que processa os dados. Note que o nome do campo (NAME) o mesmo para toda a lista de valores. Pode ser escolhida mais de uma alternativa. <INPUT TYPE=CHECKBOX NAME="esporte"VALUE="basqueteBasquete <br> <INPUT TYPE=CHECKBOX NAME=esporte VALUE=bocha>Bocha Uma diretiva CHECKED marca uma escolha inicial, isto , se o usurio no escolher nenhuma opo, o formulrio ir considerar a alternativa "pr-escolhida": <INPUT TYPE=CHECKBOX NAME="esporte"VALUE="volei"CHECKED>Vlei <br> <INPUT TYPE=CHECKBOX NAME="esporte"VALUE="futebolFutebol Esportes que voc pratica: Futebol Vlei Natao Basquete Tnis Bocha
Escolha nica RADIO: insere um boto de escolha de valores para uma opo, isto , somente uma alternativa pode ser escolhida. Note que o nome do campo (NAME) o mesmo para toda a lista de valores.
<INPUT TYPE=RADIO NAME="time"VALUE="palmPalmeiras <br> <INPUT TYPE=RADIO NAME="time"VALUE="inteInternacional Uma diretiva CHECKED marca uma escolha inicial - se o usurio no escolher nenhuma opo, o formulrio ir considerar a alternativa "pr-escolhida": <INPUT TYPE=RADIO NAME="time"VALUE="aea"CHECKED>AEA <br> <INPUT TYPE=RADIO NAME="time"VALUE="nautNutico Seu time do corao: Palmeiras; Nutico; Flamengo; Grmio; Santos; Atltico; Corinthians; Fluminense; Internacional; Cruzeiro; Botafogo; Santa Cruz; So Paulo; AEA.
Botes de ao
74
CDTC
Brasil/DF
SUBMIT: apresenta o boto que causa o envio dos dados de entrada para o servidor: <INPUT TYPE=SUBMIT> <INPUT TYPE=SUBMIT> possvel modicar o rtulo desse boto atravs do atributo VALUE <INPUT TYPE=SUBMIT VALUE="Envia mensagem RESET restaura os valores iniciais das entradas de dados. <INPUT TYPE=RESET> possvel modicar o rtulo desse boto atravs do atributo VALUE <INPUT TYPE=RESET VALUE="Apaga tudo!
12.5 SELECT
<SELECT> apresenta uma lista de valores, atravs de campos OPTION. <SELECT NAME="sabor <OPTION>Abacaxi <OPTION>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> Abacaxi, Creme, Morango, Chocolate Tambm possvel estabelecer uma escolha-padro, atravs do atributo SELECTED <SELECT NAME="sabor <OPTION>Abacaxi <OPTION SELECTED>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> Abacaxi, Creme, Morango,. Chocolate Com o atributo SIZE, escolhe-se quantos itens da lista ser mostrados (no exemplo, SIZE=4): <SELECT NAME="sabor"SIZE=4> <OPTION>Abacaxi <OPTION SELECTED>Creme <OPTION>Morango <OPTION>Chocolate 75
CDTC
Brasil/DF
</SELECT> Abacaxi, Creme, Morango, Chocolate. Com o atributo MULTIPLE, dene-se que se pode selecionar mais de um item (pressionando a tecla Shift do teclado enquanto se selecionam os itens): <SELECT NAME="sabor"SIZE=4 MULTIPLE> <OPTION>Abacaxi <OPTION SELECTED>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> Abacaxi, Creme, Morango, Chocolate.
76
Captulo 13
udio e Vdeo
13.1 udio e Vdeo
O uso de udio e vdeo na Internet vem ganhando muito destaque nos ltimos dois anos, e bom saber como usar bem estas mdias. udio e vdeo so classicados como "mdias contnuas", pois so geradas segundo determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distores. Quanto mais informaes de uma seqncia de udio ou vdeo digital so armazenados, melhor a qualidade do udio ou vdeo reproduzido. Isso implica, logicamente, no fato de arquivos de udio e vdeo serem geralmente muito grandes, o que torna invisvel o uso mais freqente dessas mdias em pginas Web. Alm de procurarmos lidar sempre com pequenos trechos de udio e vdeo, podemos explorar tecnologias recentes que permitem a transmisso em tempo real.
udio
H duas maneiras de inserir som em uma pgina: <EMBED SRC="audio.som insere o arquivo de som como objeto. <BGSOUND SRC="audio.som faz com que o som seja inserido como som de fundo ou trilha sonora de uma pgina. Esta formatao s funciona no Internet Explorer. Essas formataes, porm, no faro efeito algum se o browser no estiver congurado para "executar"o arquivo de som por meio de um plug-in adequado, ou se o computador em que estiver carregada a pgina no tiver instalada uma placa de som. Para inserir udio em uma pgina deve-se inser parmetros semelhantes a estes: <EMBED SRC="msica.mid"WIDTH="100"HEIGHT="17"AUTOSTART="true
77
CDTC
Brasil/DF
13.2 Tipos de arquivo de udio Tipos de arquivo de udio

Os tipos de arquivo de udio so escolhidos segundo o tipo de udio (voz, sons, msica), a aplicao desse udio e a qualidade de reproduo desejada. Aqui ser apresentados apenas os tipos mais comuns:
AU (Sun Audio): usando pelas estaes de trabalho da Sun Microsystems; AIFF: usado geralmente em mquinas Macintosh e Silicon Graphics; RIFF (Resource Interchange File Format): pode conter muitos tipos diferentes de dados, incluindo udio digital (WAV) e MIDI. Geralmente, os "arquivos MIDI"do Microsoft Windows est, na realidade, em formato RIFF e no MIDI; WAV (Wave): um subconjunto da especicao RIFF; AVI (Audio Video Interleave): formato Microsoft; MPEG (Motion Pictures Expert Group): o padro MPEG-3 (conhecido por MP3) o padro de compresso de udio mais popular atualmente; MIDI (Musical Instrument Digital Interface); no exatamente um formato de udio, mas de representao de msica. Um arquivo MIDI armazena informaes sobre cada nota e instrumento e, a partir dessas informaes, um sintetizador reproduz os sons. Por isso, uma msica instrumental em MIDI geralmente produzir um arquivo muito menor do que a mesma msica em Wave ou qualquer outro formato.
Nesta tabela abaixo (em construo e com alguns provveis erros) pode-se comparar o tamanho dos arquivos de udio e a qualidade oferecida:
. Fontes: SomBrasil.ig, SoundDogs.com, Baro Vermelho.com.br
udio em tempo real (Streaming)

78
CDTC
Brasil/DF
A principal diferenas entre o arquivo de udio comum e o udio em tempo real, que o arquivo de udio comum precisa ser totalmente baixado para o computador para ser executado (para tocar o udio). O udio em tempo real tocado medida que seu contedo descarregado para o computador. Para ouvir uma estao de rdio em tempo real, precisamos apenas de um programa especial instalado no computador - geralmente o Windows Media Player ou o Real Player, que tm verses gratuitas. Para a transmisso de udio em tempo real, preciso ter instalado um servidor de udio especco, tendo diversas alternativas open source (cdigo aberto). A Rdio USP transmitida pela Internet a partir desta pgina do Estdio Multimeios do CCE-USP.
13.3 Vdeo Vdeo

A insero de vdeo depende bastante do tipo de arquivo de vdeo que temos para inserir em uma pgina. De maneira geral, esta formatao pode servir para a insero de um arquivo QuickTime: <EMBED SRC="arquivo.mov Uma formatao mais completa inclui a indicao do plug-in e controles da reproduo do vdeo:
Lio 12 - Folhas de estilo <EMBED SRC="vdeo.mov"PLUGINSPACE="http://www.apple.com/quicktime/down CONTROLLER="true"AUTOPLAY="false"WIDTH="400"HEIGHT="150 Existem diversos programas freeware para fazer streaming de video, sendo um exemplo o Streamsicle 2.0 para Linux que traz um sistema completo para montar uma rdio online.
79
Captulo 14
Lioo 12 - Folhas de estilo

14.1 Folhas de estilo Folhas de Estilo
Um avano interessante na linguagem HTML aps a verso 3.2 foi a introduo das Style Sheets ou Cascading Style Sheets. Essas folhas de estilo permitem o uso de formataes uniformes em um site, de maneira bastante "econmica". Logo nas primeiras sees deste tutorial (Cores e fontes de textos), vimos que, para poder formatar um texto, preciso escrever uma marcao parecida com:
<h3><font face="Arial"color="#4A7D7BUm ttulo genrico</font></h3> <p><font face="Arial"size="2Um texto genrico com algum </font><font face="Arial" size="2"color="reddestaque qualquer</font><font face="Arial"size="2 junto, aps um ttulo genrico, etc.</font></p>
para ter o resultado:
. Acontece que, de um documento para outro, pode acontecer de esquecermos o tamanho da fonte usada no texto, qual a fonte, a cor dos ttulos de determinada subseo, e assim a uniformidade de apresentao das pginas acaba cando prejudicada. Com as folhas de estilo, podemos declarar estilos apropriados para sees de texto, aplicando esses estilos sem nos preocuparmos com detalhes de fontes, cor e tamanhos. E mais: se for necessrio modicar algum dia as cores de todos os ttulos ou dos destaques ao longo dos textos, simplesmente alteramos a folha de estilo, atualizando imediatamente a apresentao de todos os documentos que fazem referncia a ela. Para o exemplo acima, poderamos criar a seguinte folha de estilo: 80
CDTC
Brasil/DF
BODY font: 10pt Arial H3 color:#4A7D7B .destaque color: red

E assim, para ter o mesmo resultado do exemplo acima, a formatao seria muito mais simples que a primeira:
<h3>Um ttulo genrico</h3> <p>Um texto genrico com algum <span class="destaquedestaque qualquer</span> junto, aps um ttulo genrico, etc.</p>
A denio da folha de estilo deve car dentro de <HEAD>, da seguinte forma, se a folha for denida dentro do mesmo documento em que est sendo usada:
<HEAD> ... <STYLE TYPE="text/css BODY font: 10pt Arial H3 color:#4A7D7B .destaque color: red </STYLE> ... </HEAD>
Ou ento, quando a folha de estilo denida externamente:
<HEAD> ... <LINK REL="stylesheet"HREF="folha_de_estilo.css ... </HEAD>

Neste caso, uma mesma folha de estilo pode ser usada por vrios documentos HTML, que tambm poder ter suas prprias folhas de estilo internas.
14.2 Opes gerais de formatao com folhas de estilo

Duas formataes muito usadas com o uso de folhas de estilo so as que denem a apresentao geral do documento (fundo, cor e fonte de texto) e as que modicam a apresentao dos links.
Folha de estilo para BODY

So vrias as opes de congurao, mas aqui est somente as mais comuns: Denindo a cor de fundo da pgina: body background-color: #D4CCC4 Denindo a cor de fundo e a imagem de fundo da pgina: 81
CDTC
Brasil/DF
body background-color: #D4CCC4; background-image: url("/icones/fundopag.jpg") Denindo a cor de fundo e xando a imagem de fundo da pgina (no funciona com Netscape 4 e verses anteriores): body background-color: #D4CCC4; background-image: url("/icones/fundopag.jpg"); background-repeat: no-repeat; background-attachment: xed Com essas denies acima, no preciso repetir a declarao de cor e imagem de fundo na etiqueta <BODY> da pgina. Em particular, o Internet Explorer reconhece formataes para a barra de rolagem das pginas, com uma folha de estilo que dene as cores de cada componente: body scrollbar-face-color: white; scrollbar-highlight-color: yellow; scrollbar-shadow-color: blue; scrollbar-darkshadow-color: black; scrollbar-3dlight-color: red; scrollbar-arrow-color: gray; scrollbar-track-color: green Obs.: Essas cores podem ser denidas em RGB, como #ffff00; o exemplo acima apenas serve para que o efeito de cada componente que bem denido (experimente!).
Folha de estilo para os links

A denio geral de estilo para links inclui trs elementos: a:link color:#0000ff a:hover color:#ffff00 a:visited color:#c0c0c0 Alm da cor, podemos indicar se queremos o link sublinhado ou no; abaixo, denimos o link no sublinhado, o efeito de mouse-over sublinhado e o link visitado com efeito de texto riscado: a:link color:#0000ff; text-decoration: none a:hover color:#ffff00; text-decoration: underline a:visited color:#c0c0c0; text-decoration: line-through Outra opo denir uma cor de fundo para o link, por exemplo: a:hover color:#ffff00; text-decoration: none; background:#0000aa Uma folha de estilo com denies para o documento e para os links seria declarada, dentro de um documento, desta forma: 82
CDTC
Brasil/DF
<style type="text/css body background-color: #D4CCC4; background-image: url("/icones/fundopag.jpg") a:link color:#0000ff; text-decoration: none a:hover color:#ffff00; text-decoration: underline a:visited color:#c0c0c0; text-decoration: line-through </style>
83

HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

II Informaes Bsicas III GNU Free Documentation License IV HTML

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Sobre essa Apostila

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Os 10 mandamentos do aluno de educao online

Como participar dos fruns e Wikipdia

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

GNU Free Documentation License

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

FAZENDO CPIAS EXATAS

FAZENDO CPIAS EM QUANTIDADE

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

AGREGAO COM TRABALHOS INDEPENDENTES

Centro de Difuso de Tecnologia e Conhecimento

verso original em Ingls desta Licena, a verso original em Ingls prevalecer.

REVISES FUTURAS DESTA LICENA

Centro de Difuso de Tecnologia e Conhecimento

2.2 Pblico Alvo

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

O hardware para conexo Internet

O software bsico para conexo Internet

Centro de Difuso de Tecnologia e Conhecimento

3.3 Recursos da Internet

Centro de Difuso de Tecnologia e Conhecimento

3.4 O que World-Wide Web?

3.5 HTTP , URL , HTML

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

4.2 Edio de documentos HTML

Centro de Difuso de Tecnologia e Conhecimento

4.3 Edio de documentos HTML

Documento bsico e seus componentes

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

5.2 A seo <BODY>

Centro de Difuso de Tecnologia e Conhecimento

Cabealhos, Separadores e Listas

Este um cabealho de nvel 1

Os editores WYSIWYG naturalmente no permitem o aninhamento de cabealhos.

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

6.3 Listas em HTML

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Formatao de texto e caracteres

7.2 Blocos de texto

Centro de Difuso de Tecnologia e Conhecimento

7.3 Formatao de frases

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

7.4 Caracteres especiais

Centro de Difuso de Tecnologia e Conhecimento

<HEAD> ... <LINK REL="stylesheet"HREF="folha_de_estilo.css ... </HEAD>