CURSO DE INFORMÁTICA


HTML - CURSO BÁSICO E RAPIDO

INTRODUÇÃO

NESTA INTRODUÇÃO, VEREMOS UM POUCO DA TEORIA POR TRÁS DA WORLD WIDE WEB, DO HTML, BROWSERS E HOME PAGERS. SERÁ RÁPIDO E INDOLOR. AO FINAL, VOCÊ ESTARÁ FAMILIARIZADO COM A MAIOR PARTE DA TERMINOLOGIA USADA NESTE LIVRO E NA INTERNET E SABERÁ COMO LIDAR COM CONCEITOS DE CLIENTE/SERVIDOR, ENDEREÇOS IP, DOMÍNIOS E PROTOCOLOS.

REDES

UMA REDE É IMA ESTRUTURA FORMADA POR DOIS OU MAIS COMPUTADORES INTERLIGADOS . PODE-SE MONTAR UMA REDE COM UM SIMPLES CABO SERIAL CONECTANDO DOIS PCS, MAS HÁ EXAGEROS COMO EMPRESAS COM 15 MIL COMPUTADORES INTERLIGADOS. EM UMA REDE, AS MAQUINAS PODEM COMPARTILHAR PERIFÉRICOS, DADOS E PROGRAMAS. UMA IMPRESSORA A LASER DE CUSTO ELEVADO PODE SER UTILIZADA POR DIVERSOS COMPUTADORES AO MESMO TEMPO, REDUZINDO ASSIM O CUSTO DA MESMA.

UM EXEMPLO DE REDE FORMADA POR DIVERSOS COMPUTADORES ACESSANDO UM SERVIDOR, VIA LINHA TELEFÔNICA, É UM BBS OU PROVEDOR INTERNET. NELES, AS MÁQUINAS QUE COMPÕEM A REDE SE CONECTAM VIA TELEFONE A UM COMPUTADOR CENTRAL, QUE DE LÁ REDISTRIBUI AS INFORMAÇÕES.

INTERNET

UMA REDE CONVENCIONAL PODE SE CONECTAR, ATRAVÉS DE PONTES, OU GATEWAYS, COM OUTRAS REDES. AO FINAL DOS ANOS 60, FOI CRIADO UM PROJETO DO GOVERNO DOS EEUU QUE PRETENDIA INTERLIGAR NÃO COMPUTADORES, MAS REDES INTEIRAS. ESSE FOI O EMBRIÃO DO QUE CONHECEMOS COMO INTERNET, QUE EM ESSÊNCIA, É UMA "REDE DE REDES". CADA PEQUENO PROVEDOR, COM 30 LINHAS TELEFÔNICAS E UM MODESTO LINK DE 64KBITS, É PARTE DA INTERNET E NÃO UM USUÁRIO. COM MAIS DE 15 MILHÕES DE COMPUTADORES INTERLIGADOS, EM SETE CONTINENTES, OS CUSTOS SE PULVERIZAM DE TAL FORMA QUE AS PESSOAS COMUNS COMO EU E VOCÊ (A MENOS QUE SEU NOME SEJA BILL GATES) TENHAM ACESSO A COMUNICAÇÃO GLOBAL INSTANTÂNEA.

ENDEREÇO IP

E COMO ESSES MILHÕES DE COMPUTADORES (ALGO DIFÍCIL DE CONCEBER, EU SEI) CONSEGUEM SE ACHAR ? BEM, SÃO CENTENAS DE TIPOS DE MÁQUINAS, INDO DE SUPERCOMPUTADORES N-CUBE ATÉ AMIGOS, PCS E SPECTRUMS. CADA UMA CONSEGUE SER UMA ÚNICA, PORQUE CADA UMA TEM UM ENDEREÇO. NO CASO, OS ENDEREÇOS IP, QUE SÃO NÚMEROS, FORMADO POR 4 BYTES, PERFAZENDO 32 BITS. SÃO VALORES QUE NÃO SE REPETEM E CADA UM INDICA UM ÚNICO COMPUTADOR NA INTERNET.





EXEMPLO

ALGUNS SITES CONHECIDOS, E SEUS RESPECTIVOS IPS:

MICROSOFT.COM 108.105.232.4

IBM.COM 129.34.139.30

YALE.EDU 130.216.1.1

PLAYBOY.COM 205.216.146.201


DOMÍNIO

ALGUÉM CALCULOU QUE O NÚMERO MÁXIMO DE ALGARISMOS QUE UM CÉREBRO HUMANO CONSEGUE GUARDAR SEM SE CONFUNDIR É 7. NÃO QUE TENHAMOS TODOS CÉREBROS DE AMEBA, MAS EXECETO UM PEQUENO NÚMERO DE DADOS, COMO CPF, IDENTIDADE E CONTA NUMERADA NA SUIÇA, NÃO GUARDAMOS BEM NÚMEROS LONGOS. MESMO NÚMEROS DE TELEFONE, QUE ESTÃO NO LIMITE, MUITAS VEZES SÃO CONFUNDIDOS, 555-5153 PODE MUITO BEM SER MISTURADO COM 555-5156.

PENSANDO NISSO. OS IDEALIZADORES DA INTERNET INVENTARAM O CONCEITO DE "DOMÍNIO". UMA TABELA NA QUAL CADA ENDEREÇO IP É ASSOCIADO A UM NOME. ASSIM, O INTERNAUTA NÃO PRECISA FICAR DESESPERADO TENTANDO LEMBRAR SE O SITE DA PLAYBOY FICA EM 205.216.146.,201 OU 205.216.146.207. BASTA MANDAR O BROWSER PROCURAR PELO SITE EM WWW.PLAYBOY.COM .

EXISTEM ALGUMAS REGRAS PARA A ATRIBUIÇÃO DE DOMÍNIOS, COMO O USO DE LETRAS MINÚSCULAS, A PROIBIÇÃO DE SINAIS GRÁFICOS COMO +, - OU * E A EXTENSAO FINAL, QUE DEVE REFLETIR O CARACTER DA INSTIRUIÇÃO .

TEMOS AS SEGUINTES EXTENSÕES :

.MIL ORGANIZAÇÕES MILITARES.

.GOV ORGANIZAÇÕES GOVERNAMENTAIS.

.COM EMPREENDIMENTOS COMERCIAIS OU PESSOAIS.

.EDU INSTITUIÇÕES DE ENSINO.

.NET REDES MUNDIAIS OU GRANDES BACKBONES.

.ORG ONGS E ASSEMELHADOS.





OS NOMES DE DOMÍNIOS SÃO SOLICITADOS ATRAVÉS DE UMA ORGANIZAÇÃO CHAMADA INTERNIC, QUE COORDENA TODOS OS PEDIDOS, VERIFICANDO SE O DOMÍNIO JÁ NÃO FOI REGISTRADO E ECOA A INFORMAÇÃO PARA OS PRINCIPAIS COMPUTADORES DA REDE .

FORA DOS EEUU, DEFINIU-SE QUE OS DOMÍNIOS INTERNET TERMINAM COM A SIGLA DO PAÍS EM QUE O SITE ESTÁ LOCALIZADO. ASSIM, MICROSOFT.COM.BR É DIFERENTE DE MICROSOFT.COM, QUE POR SUA VEZ NÃO É O MESMO QUE MICROSOFT.COM.PT .

WWW

A WORLD WIDE WEB, COMO TAMBÉM É CONHECIDA, É A PARTE MAIS POPULAR DA INTERNET. ELA SURGIU COMO UM MEIO DE COMPARTILHAR INFORMAÇÕES CIENTÍFICAS, NO CERN - CENTRO EUROPEU DE PESQUISAS NUCLEARES. MAS POR SUA FACILIDADE DE USO, LOGO SE ESPALHOU. A "TEIA MUNDIAL", COMO A TRADUÇÃO DIZ, É FORMADA POR UM CONJUNTO SEMPRE CRESCENTE DIFERENCIA DE UMA REDE CONVENCIONAL É O FATO DE AS INFORMAÇÕES ESTAREM CONECTADAS UMAS ÀS OUTRAS, FORMANDO O CONCEITO DE HIPERTEXTO.

HIPERTEXTO

EM UM TEXTO CONVENCIONAL, AS PALAVRAS "NITROGLICERINA", CHEGAMOS A UM BECO SEM SAÍDA, POIS ALÉM DE ESTAR FORA DE CONTEXTO, ELA NADA DIZ. EM UM DOCUMENTO EM HIPERTEXTO, TEXTO SOBRE O UNABOMBER E DE LÁ PARA A HOME PAGE DA UNIÃO LÍBIA DOS FABRICANTES DE NITROGLICERINA.

UM ROMANCE EM HIPERTEXTO POSSIBILITARIA VÁRIAS LEITURAS, POIS VÁRIAS PARTES PODERIAM SER MAIS OU MENOS APROFUNDADAS, AO GOSTO DO LEITOR. TALVEZ ALGUNS SE SATISFIZESSEM EM "INDUSTRIAL" E PASSAR PARA UMA DETALHADA DESCRIÇÃO DA "CATALINA CORPORATION".

CLARO QUE NEM TODA PALAVRA DE DOCUMENTO EM HIPERTEXTO LEVA A ALGUM LUGAR, ISSO TORNARIA QUALQUER DOCUMENTO INSUPORTÁVELMENTE GRANDE.

O QUE SÃO BROWSERS

A FERRAMENTA BÁSICA PARA A VISUALIZAÇÃO DE DOCUMENTOS NA WWW SÃO OS BROWSERS. MAL TRADUZINDO, PODEM SER CHAMADOS DE "NAVEGADORES". AS PRIMEIRAS VERSÕES TRABALHAVAM EM SISTEMA OPERACIONAL UNIX, RODANDO EM MODO TEXTO. O LINK É UM EXEMPLO DE BROWSER DESSA ÉPOCA.





COM O SURGIMENTO DO MOSAIC, A WWW INGRESSOU NO MODO GRÁFICO. AOS POUCOS OS BROWSERS FORAM SE TORNANDO MAIS SOFISTICADOS, COM INCLUSÃO DE IMAGENS, NOVOS MÉTODOS DE FORMATAÇÃO DE TEXTO, RECONHECIMENTO DE NOVOS FORMATOS DE DADOS E MUITO MAIS. HOJE, TEMOS PRODUTOS SOFISTICADOS COMO O NETSCAPE ATLAS, QUE EM UM ÚNICO PACOTE ENGLOBA DUAS LINGUAGENS DE PROGRAMAÇÃO DISTINTAS (JAVA E JAVASCRIPT) MÓDULOS DE E-MAIL E NEWSGROUPS, SUPORTE A DEZENAS DE CARACTERÍSTICAS PIONEIRAS, COMO CAPACIDADE DE COMUNICAÇÃO POR VOZ VIA INTERNET E RECEPÇÃO DE VÍDEO E ÁUDIO.

HÁ DEZENAS DE BROWSERS DIFERENTES, MAS O MAIS USADO É O NETSCAPE - DISPONÍVEL PARA UMA DEZENA PLATAFORMAS DIFERENTES. MUITAS DAS EXTENSÕES SUGERIDAS PELO NETSCAPE FORAM INCORPORADAS AO PADRÃO HTML E HOJE ELE É LIDER DE MERCADO, SENDO O PRINCIPAL ALVO DA MOCROSOFT NO SEGMENTO INTERNET.

PROTOCOLO HTTP

OS PROTOCOLOS SÃO "LÍNGUAS" USADAS ENTRE O COMPUTADOR QUE ACESSA A INFORMAÇÃO E O QUE A TRANSMITE. É UMA FORMA DE PADRONIZAR OS PROCESSOS; ASSIM EVITA-SE QUE CADA PROGRAMA USE UM DIALETO DIFERENTE, GERANDO UMA BABEL DE MENSAGENS ININTELIGÍVEIS.

O HTTP. DE HYPERTEXT TRANSFER PROTOCOL, PROTOCOLO DE TRANSFERÊNCIA DE HIPERTEXTO, É A LÍNGUA FRANCA DA WWW. COM ELE, QUALQUER BROWSER PODE SE COMUNICAR COM QUALQUER SERVIDOR, INDEPENDENTE DOS FABRICANTES DOS SOFTWARES ENVOLVIDOS.

OS BROWSERS MAIS MODERNOS SUPORTAM DIVERSOS TIPOS DE PROTOCOLO, ALÉM DO HTTP. O MAIS USADO É O FTP, DE FILE TRANSFER PROTOCOL. UM MÉTODO PRÁTICO DE RECUPERAR ARQUIVOS DE SERVIDORES ESPALHADOS PELO MUNDO., PARA ACIONAR UM SERVIDOR FTP VIA NETSCAPE, BASTA DIGITAR O PROTOCOLO, SEGUIDO DO NOME DO SERVIDOR. UMA CONEXÃO ANÔNIMA SERÁ FEITA E VOCÊ ACESSARÁ O DIRETÓRIO REMOTO.

PARA ACESSAR UM SERVIDOR FTP VIA NETSCAPE, BASTA DIGITAR , NO CAMPO DE URLS, O ENDEREÇO, NA FORMA: FTP:// .

URL

UNIVERSAL RESOURCE LOCATOR . OU LOCALIZADOR UNIVERSAL DE RECURSOS . UM BELO NOME PARA MAIS UMA PADRONIZAÇÃO. A URL (EMBORA O NOME SEJA MASCULINO) É UM CONJUNTO DE INFORMAÇÕES QUE DESCREVE UM RECURSO QUALQUER NA INTERNET, SEJA E-AMIL, GOPHER, FTP, TELNET OU WWW. DESSA FORMA, OS PROGRAMAS PODEM SABER QUAIS PROTOCOLOS DEVEM UTILIZAR E PODEM INCLUSIVE INSTRUIR O USUÁRIO, QUANDO O RECURSO SOLICITADO ESTÁ ALÉM DAS HABILIDADES DO PROGRAMA.





ALGUMAS URLS VÁLIDAS :

HTTP://POBOX.COM/~CARDOSO

FTP://FTP.UNIKEY.COM.BR

GOPHER://NIFLY.ANDREW.EMU.EDU/HH//PUB/EROTICA/INDEX.HTML

TELNET:BBS.UNIKEY.COM.BR

MAILTO:CARDOSO@POBOX.COM


HOME PAGES

OU PÁGINAS WEB, OU DOCUMENTOS HTML, OU MESMO "PÁGINAS NA INTERNET", COMO ALGUNS AS CHAMAM. SÃO DOCUMENTOS HIPERMÍDIA LOCALIZADOS EM UM SERVIDOR ESPECÍFICO, MAS ACESSÍVEIS MUNDIALMENTE, ATRAVÉS DE TEXTO, OU VERDADEIROS EMARANHADOS, COMO MILHARES DE PÁGINAS EM UM ÚNICO WEBSITE.

A UM CONJUNTO DE PÁGINAS INTERLIGADAS, TRATANDO SOBRE O MESMO ASSUNTO, OU SOB RESPONSABILIDADE DE UM ÚNICO WEBMASTER, DÁ SE O NOME DE WEBSITE.

AO CONTRÁRIO DE TODA A MÍDIA ELETRÔNICA JÁ PRODUZIDA, A PUBLICAÇÃO DE UMA PÁGINA WEB NÃO É NEM COMPLICADA NEM CUSTOSA. A MAIORIA DOS PROVEDORES DE ACESSO FRANQUEIA ESPAÇO EM SEU SERVIDOR PARA OS ASSINANTES DO SISTEMA E MESMO QUANDO É PAGO, NÃO É UM ESPAÇO CARO.

A HOME PAGE PESSOAL ESTÁ PARA OS ANOS 90 COMO O FAX ESTEVE PARA OS ANOS 80. É INADMISSÍVEL UMA PESSOA "MODERNA" NÃO TER A SUA. E PELA FACILIDADE COM QUE UMA PODE SER FEITA, A AFIRMATIVA É VERDADEIRA.

EM UMA HOME PAGE PESSOAL, VOCÊ PODE DISPONIBILIZAR O QUE QUISER: SEUS POEMAS, FOTOS DO SERU CASTOR DE ESTIMAÇÃO, DESENHOS DOS FILHOS, COMENTÁRIOS SOBRE SEU TRABALHO... O LIMITE É SUA IMAGINAÇÃO E O ESPAÇO EM DISCO.

UM DOS EFEITOS COLATERIAS DA WWW, É QUE MUITAS VEZES PÁGINAS DE INDIVÍDUOS SÃO MAIS BEM-APRESENTADAS QUE PÁGINAS DE GRANDES CORPORAÇÕES. UM INVESTIMENTO DE DEZENAS DE MILHARES DE DÓLARES PODE SER SOBREPUJADO POR UM USUÁRIO PERSISTENTE E TALENTOSO.





HTML, FINALMENTE

AGORA QUE VOCÊ JÁ TEM UMA LEVE NOÇÃO DA INTERNET, PODEMOS FALAR DO ASSUNTO PRINCIPAL: A HYPERTEXT MARKUP LANGUAGE É A LINGUAGEM UTILIZADA PARA PRODUZIR OS DOCUMENTOS WEB, NOSSAS QUERIDAS HOME PAGES.

NÃO É UMA LINGUAGEM DE PROGRAMAÇÃO. É UMA LINGUAGEM DE DESCRIÇÃO DE PÁGINA, COMO O ADOBE POSTSCRIPT, OU O AEROBAT. O HTML, É MUITO MAIS SIMPLES QUE ESSES DOIS, CLARO. AS MÁS LÍNGUAS COMPARAM A LINGUAGEM DE TAGS DO HTML COM UM CERTO EDITOR DE TEXTOS TUPINIQUIM, DO PERÍODO CRETÁCEO INFERIOR, QUE FORMATAVA SEUS TEXTOS DA MESMA FORMA, MAS USAVA A TECLA ESC PARA CONFIRMAR UMA AÇÃO. MAS ISSO É HISTÓRIA.

EXISTEM DIVERSOS PADRÕES DE HTML, COMO O 1.0, O HTML 2.0 E O (EM FASE DE DEFINIÇÃO, QUANDO DO FECHAMENTO DO LIVRO) O HTML 3.0 . CADA UM APRESENTA FACILIDADES INEXISTENTES NO ANTERIOR, E SÃO RAZOAVELMENTE RESPEITADOS PELA INDÚSTRIA. NA PRÁTICA, OS PRODUTORES MAIS ATIVOS, COMO O NETSCAPE E A MICROSOFT, CRIAM EXTENSOES AO PADRÃO E POPULARIZARAM-NAS EM SEUS PRODUTOS, INDUZINDO ASSIM A OFICIALIZAÇÃO DA EXTENSÃO. ACABA SENDO UMA PRÁTICA INTERESSANTE, POIS AS BOAS ADIÇÕES, COMO AS LETRAS COLORIDAS E TEXTO CENTRALIZADO, SÃO ALEGREMENTE RECEBIDAS PELOS USUÁRIOS, ENQUANTO AS MÁS, COMO O EFEITO DE "TEXTO-PISCA-PISCA" E O "MARQUEE" DA MICROSOFT, SÃO SOLENEMENTE IGNORADOS.

ALGUMAS LINGUAGENS, COMO C++, PASCAL E DELPHI, SÃO COMPILADAS. ISTO É, UM PROGRAMA LÊ TODO O PROGRAMA QUE VOCÊ DIGITOU, E O TRANSFORMA EM LINGUAGEM DE MÁQUINA, QUE SÓ O COMPUTADOR PODE LER COM FACILIDADE. ISSO FAZ COM QUE O PROGRAMA EXECUTE BEM MAIS RÁPIDO, AO MESMO TEMPO EM QUE PROTEGE O AUTOR, POIS O USUÁRIO NÃO TEM ACESSO AOS ORIGINAIS, OU CÓDIGO-FONTE.

EM HTML, ISSO NÃO ACONTECE. O ARQUIVO HTML, É INTERPRETADO. CADA LINHA É EXECUTADA, APÓS SER LIDA.

PARA ENTENDER A DIFERENÇA ENTRE UM PROGRAMA COMPILADO E UM INTERPRETADO, IMAGINEMOS UM ATOR QUE DECOROU UM TEXTO ATÉ A ÚLTIMA LINHA; ELE NÃO PRECISA DE SCRIPT, E DECLAMA SUA FALA COM AGILIDADE. ISSO É CÓDIGO COMPILADO. JÁ UM ATOR QUE NÃO CONSEGUISSE GUARDAR UMA LINHA, E INTERPRETASSE COM O SCRIPT NA MÃO, LENDO LINHA A LINHA DO TEXTO, SERIA UM CÓDIGO INTERPRETADO.





A SUA PÁGINA, DO MESMO MODO QUE VOCÊ DIGITOU, PODE SER VISTA PELO USUÁRIO, BASTANDO QUE ELE SELECIONE O COMANDO PARA EXIBIR O FONTE. NO NETSCAPE, ESSA OPÇÃO FIA NO MENU VIEW, OPÇÃO DOCUMENT SOURCE.

EXPERIMENTE. ACESSE MINHA PÁGINA NA INTERNET, EM HTTP://MARCIOANTONIOOLIVA.COM.BR

DEPOIS QUE A PÁGINA FOR TOTALMENTE CARREGADA, UTILIZE A OPÇÃO VIEW/DOCUMENT SOURCE DE SEU BROWSER. VOCÊ ESTARÁ VENDO O CÓDIGO HTML, DA MINHA PÁGINA, CONFORME O PROGRAMEI, HÁ ALGUNS MESES.





UNIDADE I

CONFIGURANDO O SEU SISTEMA

NESTA UNIDADE, VEREMOS COMO CONFIGURAR E UTILIZAR OS PROGRAMAS BÁSICOS PARA A PRODUÇÃO DE DOCUMENTOS HTML, COMO O NETSCAPE E O INTERNET EXPLORER. VEREMOS COMO CAPTURAR DOCUMENTOS HTML, VISUALIZAR SEUS FONTES E ATÉ CONHECEREMOS UMA NOVA URL.





LIÇÃO 1 - ESCOLHENDO OS BROWSERS

CONCEITO

O AMBIENTE WINDOWS ´W BASTANTE FÉRTIL EM MATÉRIA DE BROWSERS HTML, MAS A MAIOR QUANTIDADE DE INVESTIMENTO, EM DINHEIRO E TECNOLOGIA, VEM SENDO FEITA PELA NETSCAPE COMMUNICATIONS E SEU NETSCAPE NAVIGATOR, E PELA MICROSOFT, COM O INTERNET EXPLORER. ASSIM, É SEGURO CENTRALIZAR A PRODUÇÃO DE SEU DOCUMENTO HTML, PARA OS BROWSERS DESSAS EMPRESAS.

COLOCANDO PREFERÊNCIAS PESSOAIS DE LADO, DEVE-SE TER INSTALADOS NO COMPUTADOR OS DOIS PROGRAMAS, POIS UMA PÁGINA PODE APRESENTAR DIFERENÇAS MAIS OU MENOS SUTIS, QUANDO EXIBIDA EM CADA UM DOS SOFTWARES.

EXEMPLO

OUTROS BROWSERS DISPONIVEIS NO MERCADO:

( ) MOSAIC

( ) LINX

( ) EMISSARY

( ) HOTJAVA

PRATIQUE NO MICRO

INSTALE, EM SUA MÁQUINA, AO MENOS OS BROWSERS NESTSCAPE E INTERNET EXPLORER. ASSIM, VOCÊ EVITA SURPRESAS DESAGRADÁVEIS, TESTANDO SEMPRE SUAS PÁGINAS COM OS DOIS BROWSERS PRINCIPAIS. MAIS DE UMA PÁGINA LINDA NO NETSCAPE FICOU MEDIOCRE OU ILEGÍVEL NO INTERNET EXOLORER. E VICE-VERSA.





LIÇÃO 2 - O SOFTWARE DE EDIÇÃO ESCOLHIDO

CONCEITO

HÁ DEZENAS DE PROGRAMAS RECOMENDADOS PARA EDIÇÃO DE DOCUMENTOS HTML, MAS A MAIORIA PARTE DO PRINCÍPIO DE QUE O USUÁRIO JÁ CONHECE A LINGUAGEM. PARA QUEM QUER APRENDER REALMENTE, O MELHOR DELES CHAMA-SE NOTEPAD, E VEM DE GRAÇA, COM SUA CÓPIA DO WINDOWS.

UM DOCUMENTO HTML, AFINAL, NADA MAIS É QUE UM ARQUIVO-TEXTO, COM UMA EXTENSÃO DIFERENTE. DE .TXT ELA PASSA A SER .HTM OU, EM ALGUNS SISTEMAS, .HTML .

NAS VERSÕES EM PORTUGUÊS, O WINDOWS CHAMA O NOTEPAD DE BLOCO DE NOTAS. O PROGRAMA É O MESMO.

EXEMPLO

O MELHOR SOFTWARE DE EDIÇÃO DE HOME PAGE, ATUALMENTE, É O HOTDOG, PRODUZIDO PELA SAUSAGE SOFTWARE 9HTTP://SAUSAGE.COM). OUTROS PROGRAMAS DE EDIÇÃO DE HOME PAGES:





( ) HOTMETAL

( ) MICROSOFT FRONTPAGE

( ) PAGEMAKER 6+

( ) W3

PRATIQUE NO MICRO

EXPERIMENTE CRIAR E SALVAR NO NOTEPAD ARQUIVOS COM EXTENSÕES NÃO-CONVENCIONAIS, E ACOSTUME-SE A NUNCA VER UM DIRETÓRIO VAZIO E ACREDITAR DE PRIMEIRA QUE NÃO EXISTE NADA LÁ. TORNE UM HÁBITO O USO DA OPÇÃO DE VISIBILIDADE DE TODOS OS ARQUIVOS. POR DEFAULT, O NOTEPAD SÓ LISTA OS ARQUIVOS .TXT .

LIÇÃO 3 - CRIANDO UM DIRETÓRIO DE TRABALHO

CONCEITO

UM FATOR FUNDAMENTAL PARA A PRODUÇÃO DE QUALQUER COISA EM COMPUTADOR É A ORGANIZAÇÃO. DEVEMOS SEPARAR NOSSOS TRABALHOS E ARQUIVOS EM DIRETÓRIOS, DE FORMA ORDENADA. A FIM DE AGILIZAR NOSSOS EXERCÍCIOS NO DECORRER DESTE LIVRO, VAMOS CRIAR UM DIRETÓRIO ONDE COLOCAREMOS TODOS OS ARQUIVOS CRIADOS. ISSO FACILITARÁ NOSSA VIDA NA HORA QUE QUISERMOS ACESSAR ALGO, POIS NÃO PRECISAREMOS FICAR PROCURANDO POR TODO O HD.

EXEMPLO

PARA CRIAR UM DIRETÓRIO EM DOS, DIGITE, NO PROMPT, A SEGUINTE SEQUÊNCIA DE COMANDOS:

CD C:\
MD DADOS
CD DADOS
MD WWW

ASSIM, TEREMOS CRIADO O SEGUINTE DIRETÓRIO:

C:\DADOS\WWW





PRATIQUE NO MICRO

SEGUINDO O EXEMPLO, CRIE O DIRETÓRIO C:\DADOS\WWW EM SEU COMPUTADOR.

PARA DETALHES SOBRE A CRIAÇÃO DE DIRETÓRIOS CONSULTE O MANUAL DO WINDOWS/DOS.

LIÇÃO 4 - VISUALIZANDO A PÁGINA NO BROWSER

CONCEITO

PODEMOS EXIBIR UM DOCUMENTO HTML, EM NOSSO BROWSER SELECIONANDO UM LINK OU DIGITANDO A URL NO CAMPO CORRESPONDENTE. COMO TRABALHAREMOS NA MAIOR PARTE DO TEMPO COM DOCUMENTOS LOCAIS, VAMOS USAR O MÉTODO DA URL.

EXEMPLO

PARA EXIBIR UM DOCUMENTO VIA LINK, CLIQUE NO BOTÃO DE SEU NETSCAPE. ELE LEVARÁ A´TE O DOCUMENTO SELECIONADO, NO SITE DA NETSCAPE COMMUNICATIONS.

PARA EXIBIR UM DOCUMENTO VIA URL, SIMPLESMENTE DIGITE, NO CAMPO CORRESPONDENTE, O ENDEREÇO QUE PODE SER:

HTTP://NETSCAPE.COM

PRATIQUE NO MICRO

CRIE NO NOSSO DIRETÓRIO DE TRABALHO UM ARQUIVO DO NOTEPAD, DE NOME PRIMEIRA.HTM, COM O SEGUINTE CONTEUDO :

1< HTML >
2< HEAD >
3< TITLE > PRIMEIRA PÁGINA < / TITLE >
4< / HEAD >
5< BODY >
6< CENTER >
7< H2 >
8 A PRIMEIRA HOME PAGE A GENTE NUNCA ESQUECE
9< / H2 >
10< / CENTER >
11< / BODY >
12< / HTML >



A PRIMEIRA HOME PAGE A GENTE NUNCA ESQUECE








APÓS SALVÁ-LO, VÁ AO NETSCAPE E COLOQUE A URL ABAIXO NO CAMPO CORRESPONDENTE:

FILE:///C:\DADOS\WWW\PRIMEIRA.HTM

SE TUDO DEU CERTO, VOCÊ ESTARÁ VENDO EM SEU NETSCAPE ALGO MUITO PRÓXIMO A ISSO:

A PRIMEIRA HOME PAGE A GENTE NUNCA ESQUECE

TANTO NO NETSCAPE QUANTO NO INTERNET EXPLORER, PODE-SE ABRIR UM ARQUIVO ATRAVÉS DA COMBINAÇÃO CTRL+O. NO CASO DO EXPLORER, PROSSEGUE-SE CLICANDO EM "ABRIR ARQUIVO". JÁ O NETSCAPE VAI DIRETO PARA A CAIXA DE DIÁLOGO, LISTANDO OS DIRETÓRIOS.

LIÇÃO 5 - VISUALIZANDO O ARQUIVO-FONTE DE UM DOCUMENTO HTML

CONCEITO

POR SER INTERPRETADO E NÃO COMPILADO, É POSSÍVEL VISUALIZAR FACILMENTE O DOCUMENTO HTML DE ORIGEM DE QUALQUER PÁGINA. NO NETSCAPE, ISSO É ACESSÍVEL ATRAVÉS DO MENU VIEW/DOCUMENT SOURCE, QUE ABRIRÁ UMA JANELA COM O ARQUIVO HTML DA PÁGINA ATUAL. NO INTERNET EXPLORER, USA-SE A OPÇÃO EXIBIR/FONTE, QUE PRODUZ OS MESMOS RESULTADOS.





EXEMPLO

VEJAMOS A SIMPÁTICA PÁGINA ABAIXO:

PÁGINA DA PLAYBOY, EM ALGUM LUGAR NO SITE WWW.PLAYBOY.COM .

AO SELECIONARMOS A OPÇÃO VIEW/DOCUMENT SOURCE, ABRE-SE UMA JANELA COM O ARQUIVO HTML :

ARQUIVO HTML DA PÁGINA ANTERIOR. DIDÁTICO, MAS NÃO TÃO INTERESSANTE .





PRATIQUE NO MICRO

PASSEIE PELA INTERNET, VISUALIZANDO OS ARQUIVOS-FONTE DAS PÁGINAS QUE VOCÊ QUISER. NOTE A MUDANÇA NO ESTILO DOS PROGRAMADORES, CADA UM COM UMA FORMATAÇÃO DO CÓDIGO FEITA DE FORMA DIFERENTE. ESTUDE OS MAIS CLAROS E BEM ARRUMADOS.

LIÇÃO 6 - SALVANDO O ARQUIVO-FONTE DE UM DOCUMENTO HTML

CONCEITO

ALGUMAS VEZES QUEREMOS EXAMINAR EM DETALHES AS TÉCNICAS USADAS EM UMA DETERMINADA PÁGINA, OU IMPRIMIR UMA CÓPIA PARA POSTERIOR ESTUDO. PARA ISSO, OS BROWSERS OFERECEM A OPÇÃO DE SALVAR EM DISCO O DOCUMENTO HTML ATIVO.

AS IMAGENS NÃO SÃO SALVAS, APENAS O CÓDIGO-FONTE HTML. ISSO É MAIS DO QUE SUFICIENTE PARA UMA ANÁLISE DETALHADA DE UMA PÁGINA.

EXEMPLO

PARA SALVAR O ARQUIVO-FONTE DE UMA PÁGINA, SELECIONE NO NETSCAPE A OPÇÃO FILE/SAVE AS. SERÁ ABERTA UMA JANELA, NA QUAL VOCÊ SIMPLESMENTE ESCOLHE O DIRETÓRIO E O NOME DO ARQUIVO. DEPOIS DISSO, VOCÊ PODE EDITAR À VONTADE O DOCUMENTO SALVO.





EM AMBOS OS BROWSERS, NETSCAPE E EXPLORER, ACIONA-SE A OPÇÃO DE GRAVAÇÃO DO DOCUMENTO HTML, ATRAVÉS DA COMBINAÇÃO CTRL+S.

PRATIQUE NO MICRO

VISITE VÁRIAS PÁGINAS QUE VOCÊ CONSIDERE INTERESSANTES, SALVE-AS COMO DOCUMENTOS HTML, EM NOSSO DIRETÓRIO C:\DADOS\WWW E ESTUDE-AS, COM O AUXÍLIO DO NOTEPAD. PROCURE MENSAGENS OCULTAS E OUTRAS GRACINHAS QUE OS AUTORES COSTUMAM COLOCAR NO CÓDIGO-FONTE DE ALGUMAS PÁGINAS.





UNIDADE II

HTML - PRIMEIROS PASSOS

NESTA UNIDADE, VOCÊ CONHECERÁ A ESTRUTURA DE UMA HOME PAGE, E A RECONHECER COMPONENTES COMO TAGS, ELEMENTOS MODIFICADORES E VALORES. ESTA ÚNICA UNIDADE ENGLOBA TODA A ESSÊNCIA DO HTML. VOCÊ VERÁ PORQUÊ É TÃO SIMPLES E GRATIFICANTE PRODUZIR TRABALHOS NESSA LINGUAGEM.





LIÇÃO 1 - TAGS


COMO JÁ FOI DITO, UM DOCUMENTO EM HTML, É UM ARQUIVO TEXTO, COM UMA SÉRIE DE COMANDOS QUE DESCREVEM UMA PÁGINA. ESSES COMANDOS SÃO TAGS. EXISTEM MUITAS, MAS MUITAS TAGS EM HTML, MAS A MAIOR PARTE DO TRAEBALHO É FEITA POR UMA QUANTIDADE RELATIVAMENTE PEQUENA.

AS TAGS NADA MAIS SÃO QUE PALAVRAS CERCADAS PELOS SINAIS "<" E ">". ELAS PODEM AFETAR APENAS UMA PARTE DO TEXTO OU TODO O CONTEÚDO DA PÁGINA, DO PONTO EM QUE SÃO INSERIDAS EM DIANTE.

EXEMPLO

ALGUMAS TAGS VÁLIDAS EM HTML.

1< BLINK >
2< BLOCKQUOTE >
3< BODY >
3< BR >
4< CAPTION >
5< CENTER >
6< CITE >
7< CODE >
8< TABLE >
9< TD >
10< TEXTAREA >
11< TH >
12< TITLE >
13< TR >
14< TT >
15< U >
16< UL >
17< VAR >
18< XMP >





NÃO É PRECISO SE PREOCUPAR COM USO DE MAIÚSCULAS OU MINÚSCULAS EM HTML. PARA OS BROWSERS, < CENTER > É IGUAL A < center > QUE É IDÊNTICO A < CeNtEr >.

PRATIQUE NO MICRO

PESQUISE O CÓDIGO-FONTE DE DIVERSAS HOME PAGES E IDENTIFIQUE AS TAGS USADAS. TENTE DEDUZIR A FUNÇÃO DAS MAIS SIMPLES.

LIÇÃO 2 - TAGS COMPOSTAS

CONCEITO

AS TAGS PODEM SER DE DOIS TIPOS: ISOLADAS OU COMPOSTAS. AS TAGS COMPOSTAS SÃO FORMADAS POR UMA TAG DE ABERTURA, NO FORMATO E UMA TAG DE FECHAMENTO, COM UMA BARRA INDICANDO O FIM DA ÁREA DE ATUAÇÃO DA MESMA.

EXEMPLO

UM DOCUMENTO HTML, DEMONSTRANDO A TAG COMPOSTA < CENTER >, E SEU COMPLEMENTO, < / CENTER >.

1< HTML >
2< HEAD >
3< TITLE > TAG COMPOSTA < / TITLE >
4< / HEAD >
5< BODY >
6 ESQUERDA
7< CENTER >
8 CENTRO
9< / CENTER >
10 ESQUERDA
11< / BODY >
12< / HTML >

ESQUERDA


CENTRO

ESQUERDA





PARA O HTML, TANTO FAZ SE A TAG É INSERIDA AO LADO DO TEXTO OU NA LINHA ANTERIOR. DESCUBRA A FORMATAÇÃO QUE MAIS SE ADAPTA A SEU GOSTO E USE-A .

PRATIQUE NO MICRO

NA LISTA DAS TAGS QUE VOCÊ COMPÔS, NA LIÇÃO ANTERIOR IDENTIFIQUE AS COMPOSTAS.

LIÇÃO 3 - TAGS ISOLADAS

CONCEITO

SÃO TAGS QUE, POR SUA PRÓPRIA NATUREZA, NÃO NECESSITAM DE TAGS DE FECHAMENTO. UM COMANDO DE CENTRALIZAR TEXTO OBVIAMENTE CENTRALIZA ALGO E É PRECISO INDICAR O QUE DEVE SER CENTRALIZADO E QUANDO PARAR DE CENTRALIZAR. JÁ UMA TAG DE QUEBRA DE LINHA NÃO SE ENQUADRA NESSA CARACTERÍSTICA. É USADA COMO TAG ISOLADA.

EXEMPLO

VEJAMOS UMA PÁGINA, SEMELHANTE À ANTERIOR, MAS UTILIZANDO A TAG ISOLADA < BR >, QUE GERA UMA QUEBRA DE LINHA EM HTML:





1< HTML >
2< HEAD >
3< TITLE > TAG ISOLADA < / TITLE >
4< / HEAD >
5< BODY >
6 UMA LINHA
7< BR >
8 DUAS LINHAS
9< BR > < BR >
10 TRÊS LINHAS
11< / BODY >
12< / HTML >

UMA LINHA


DUAS LINHAS



TRÊS LINHAS

PÁGINA DEMONSTRANDO O USO DE UMA TAG ISOLADA. NO CASO, < BR >, PARA QUEBRA DE LINHA.

O ATO DE APERTAR ENTER AO FINAL DE UMA LINHA NÃO FAZ COM QUE ESSA QUEBRA, VISUAL, SEJA FORMATADA PELO HTML. COMO EXPERIÊNCIA, APAGUE A PRIMEIRA OCORRÊNCIA DA TAG < BR >, NA PÁGINA ANTERIOR. MESMO ESTANDO VISUALMENTE EM LINHAS DIFERENTES NO ARQUIVO-FONTE, AS FRASES "UMA LINHA" E "DUAS LINHAS" SERÃO COMPOSTAS LADO A LADO.





PRATIQUE NO MICRO

NA LISTA DAS TAGS QUE VOCÊ COMPÔS NO EXERCÍCIO DA LIÇÃO 1, IDENTIFIQUE AS TAGS ISOLADAS.

LIÇÃO 4 - A ESTRUTURA DO DOCUMENTO HTML

CONCEITO

UM DOCUMENTO HTML, É FORMADO POR ALGUMAS PARTES BÁSICAS QUE BROWSER PERCORRE, UMA A UMA, QUANDO INTERPRETA O MESMO.

ESSAS SEÇÕES SÃO IDENTIFICADAS POR TAGS E A PRIMEIRA ENCONTRADA EM UMA HOME PAGE É A TAG < HTML >. QUALQUER INFORMAÇÃO QUE NÃO ESTEJA ENTRE ESTA TAG E SEU COMPLEMENTO < / HTML > É SOLENEMENTE IGNORADA.

A SEGUIR, TEMOS A SEÇÃO < HEAD >, QUE DEFINE O CABEÇALHO DA PÁGINA, E A SEÇÃO < BODY >, QUE ENGLOBA OS DADOS PRINCIPAIS, TUDO QUE SERÁ EXIBIDO NO SEU BROWSER.

ENCERRANDO CADA SEÇÃO, O COMPLEMENTO .

EXEMPLO

O DOCUMENTO HTML, BÁSICO:

< HTML > -> TAG INDICADORA DE INFORMAÇÕES EM HTML .

< HEAD > -> CABEÇÃLHO

< TITLE > -> INÍCIO DO TÍTULO

AQUI ENTRA O TÍTULO DA PÁGINA

< / TITLE > -> ENCERRAMENTO DO TÍTULO

< / HEAD > -> ENCERRAMENTO DO CABEÇALHO

< BODY > -> INÍCIO DO CORPO PRINCIPAL DA PÁGINA

AQUI ENTRA A PÁGINA EM SI

< / BODY > -> AQUI ENCERRA-SE O CORPO DA PÁGINA

< / HTML > -> INDICA O FIM DO DOCUMENTO HTML.





PRATIQUE NO MICRO

GRAVE EM DISCO O CÓDIGO-FONTE DA HOME-PAGE DA AXCEL BOOKS, EM HTTP://WWW.AXCELLBOOKS.COM.BR , E IDENTIFIQUE, IGNORANDO OS COMANDOS DESCONHECIDOS, AS SESSÕES < EAD > < TITLE > E < BODY >.

USE A TÉCNICA ENSINADA NA UNIDADE ANTERIOR E GRAVE EM DISCO O CÓDIGO-FONTE, DIRETO DO SITE DA AXCEL BOOKS.

LIÇÃO 5 - A TAG

CONCEITO

APARENTEMENTE ELA SÓ SERVE PARA ENGLOBAR A TAG < TITLE >, MAS NÃO É VERDADE. DIVERSOS RECURSOS DE HTML AVANÇADO UTILIZAM ELEMENTOS MODIFICADORES DA TAG < HEAD >, COMO O < META >, QUE POSSIBILITA RECURSOS COMO EXIBIR UMA PÁGINA E, APÓS ALGUNS SEGUNDOS, EXIBIR UMA SEGUNDA PÁGINA, SEM QUE O USUÁRIO CLIQUE EM LUGAR ALGUM. TAMBÉM É UTILIZADA PARA TRANSMITIR INFORMAÇÕES COMO O NOME DO AUTOR DA PÁGINA, O SOFTWARE UTILIZADO, PALAVRAS-CHAVE PARA PESQUISA, ETC.

EXEMPLO

PÁGINA DE ABERTURA DO UNIKEY BBS, QUE FAZ USO DO MODIFICADOR < META >, PARA, APÓS 10 SEGUNDOS DE EXIBIÇÃO, INSTRUIR O BROWSER PARA CARREGAR A PRÓXIMA PÁGINA. REPARE QUE A PÁGINA APRESENTA ALGUNS GRÁFICOS BEM PESADOS, MAS A CONTAGEM SÓ COMEÇA A SER FEITA APÓS TODOS OS COMPONENTES DA PÁGINA TEREM SIDO CARREGADOS.

PÁGINA USANDO O ELEMENTO < META >, EM HTTP://WWW.UNIKEY.COM.BR





PRATIQUE NO MICRO

USANDO O QUE VOCÊ JÁ SABE, SALVE EM DISCO O CÓDIGO-FONTE DA PÁGINA ANTERIOR E LOCALIZE OS ELEMENTOS < META > PRESENTES. TENTE DEDUZIR QUAL CUIDA DA EXIBIÇÃO DE OUTRO ARQUIVO .HTM, APÓS UMA PAUSA DE 10 SEGUNDOS.

APROVEITE PARA REPARAR QUE O HTML PODE SER BEM CONDESCENDENTE. O < META > EM QUESTÃO FOI COLOCADO FORA DO CAMPO DE ATUAÇÃO DA TAG < HEAD >, MAS MESMO ASSIM FUNCIONA. NEM SEMPRE É O CASO.

A ÚNICA TAG OBRIGATÓRIA ENTRE AS TAGS < HEAD > < / HEAD > É A TAG < TITLE >.

LIÇÃO 6 - A TAG < TITLE >

CONCEITO

ESSA TAG É MAIS IMPORTANTE DO QUE APARENTA. ALÉM DE DEFINIR O TÍTULO DA PÁGINA, COMO APARECE AO TOPO, NA BARRA DE TÍTULO DO SEU BROWSER, A TAG < TITLE > É UMA DAS PRIMEIRAS A SER PESQUISADAS PELOS SOFTWARES DE BUSCA COMO ALTA VISTA OU O EXCITE. A INFORMAÇÃO QUE VOCÊ COLOCA NO TÍTULO PODE SER A DIFERENÇA ENTRE SUA PÁGINA SER ENCONTRADA OU NÃO.

O USO É EXTREMAMENTE DIRETO, ENTRE AS TAGS < HEAD >, COLOCA-SE A TAG < TITLE > DIGITA-SE O TÍTULO DA PÁGINA, E FECHA-SE COM A TAG < / TITLE > .

PRESTE ATENÇÃO PARA NÃO SER MUITO GRANDE , TÍTULOS COM MAIS DE 64 CARACTERES SERÃO TRUNCADOS EM ALGUNS BROWSERS. MAS COMO O RECORDISTA DE TÍTULOS EM HOLLYWOOD, O FILME "PARA WOG-FOO, COM AMOR, OBRIGADO POR TUDO - JULIE NEWMAR.", SÓ TEM 58 CARACTERES, 64 ESTÁ DE BOM TAMANHO.

EXEMPLO
ESTA É A PÁGINA DO TEAM 0S/2 BRASIL. O TÍTULO É UM PRIMOR DE OBJETIVIDADE. SE ALGUM DIA ALGUÉM RESOLVER USAR UM PROGRAMA DE BUSCA PARA PROCURAR ALGO SOBRE OS/2, COM CERTEZA ESSA PÁGINA SERÁ ENCONTRADA.





PÁGINA DO TEM OS/2 BRASIL. ASSIM COMO O DITO SISTEMA OPERACIONAL, ESPERAM ESTAR NO AR EM BREVE.

PRATIQUE NO MICRO

ALTERE NOSSA PÁGINA DE EXEMPLO, UTILIZANDO UM TÍTULO DE SUA ESCOLHA.

LIÇÃO 7 - A TAG < BODY >

CONCEITO

ESTA SIM, É IMPORTANTE. ENTRE AS TAGS < BODY > E < / BODY >. ENCONTRAMOS O CERNE DE NOSSA PÁGINA. É ALI QUE DEVEMOS COLOCAR TODAS AS INFORMAÇÕES.

A TAG < BODY > POSSIBILITA, TAMBÉM, UMA SÉRIE DE MODIFICADORES, QUE AFETARÃO TODA A PÁGINA. PODEMOS CARREGAR PROGRAMAS EM JAVASCRIPT, MODIFICAR CORES E FUNDOS DOS DIVERSOS ELEMENTOS DA PÁGINA, TUDO COM < BODY >.

EXEMPLO

INSERINDO-SE UM SIMPLES ELEMENTO, BGCOLOR=#000000 EM UMA TAG < BODY >, ALTERAMOS TODA A PÁGINA, MODIFICANDO A COR DO FUNDO PARA PRETO. A SINTAXE SERIA :







PRATIQUE NO MICRO

PROCURE PÁGINAS NAS QUAIS A TAG < BODY > APRESENTA UM OU MAIS COMPLEMENTOS. EXPERIMENTE RETIRÁ-LOS OU MODIFICÁ-LOS, PARA VER O QUE ELSE FAZEM.

LIÇÃO 8 - ELEMENTOS

CONCEITO

UM ELEMENTO MODIFICADOR PODE SER ATÉ OUTRA TAG, É UMA QUESTÃO DE SINTAXE. USAREMOS O CONCEITO DE TAG COMO A UNIDADE BÁSICA E ELEMENTO COMO UM AUXILIAR, UM COMPLEMENTO . ASSIM, TEMOS A TAG < IMG SRC="ARQUIVO.GIF" >. ELA, DA FORMA QUE ESTÁ, EXIBE A IMAGEM ARQUIVO.GIF, EM SEU TAMANHO ORIGINAL E SEM MOLDURA.

EXEMPLO

CASO DESEJEMOS ESPECIFICAR UMA MOLDURA PARA UMA IMAGEM INTRODUZIMOS O MODIFICADOR BORDER=X NA TAG. PARA UMA MOLDURA DE 5 PIXELS DE ESPESSURA, A TAG FICARIA DA SEGUINTE FORMA:

< IMG SRC="ARQUIVO.GIF" BORDER=5 >

SE QUISERMOS ESPECIFICAR A ALTURA E A LARGURA DA IMAGEM. FAREMOS USO DOS MODIFICADORES HEIGHT E WIDTH, RESPECTIVAMENTE. ASSIM, SE NOSSA IMAGEM DESTINA-SE A SER EXIBIDA NO TAMANHO DE 256 PIXELS DE LARGURA, POR 192 PIXELS DE ALTURA, MANTENDO-SE A MOLDURA DE 5 PIXELS, A TAG FICARIA ASSIM :

< IMG SRC="ARQUIVO.GIF" WIDTH=256 HEIGHT=192 BORDER=5 >

PRATIQUE NO MICRO

PRIMEIRO, VOCÊ VAI PRECISAR DE UMA IMAGEM, PEQUENA, DE PREFERÊNCIA.

NO EXEMPLO, FOI USADO UM GIF DE 257X230. NÃO É PRECISO SER FIEL A ESSAS MEDIDAS. SALVE O GIF NO DIRETORIO C:\DADOS\WWW, SOB O NOME IMAGEM.GIF .

AGORA, VAMOS CRIAR UMA PÁGINA COM O SEGUINTE CÓDIGO-FONTE:





PRATIQUE NO MICRO

PROCURE PÁGINAS NAS QUAIS A TAG < BODY > APRESENTA UM OU MAIS COMPLEMENTOS. EXPERIMENTE RETIRÁ-LOS OU MODIFICÁ-LOS, PARA VER O QUE ELES FAZEM.

LIÇÃO 8 - ELEMENTOS

CONCEITO

UM ELEMENTO MODIFICADOR PODE SER ATÉ OUTRA TAG, É UMA QUESTÃO DE SINTAXE. USAREMOS O CONCEITO DE TAG COMO A UNIDADE BÁSICA E ELEMENTO COMO UM AUXILIAR, UM COMPLEMENTO . ASSIM, TEMOS A TAG < IMG SRC="ARQUIVO.GIF" >. ELA, DA FORMA QUE ESTÁ, EXIBE A IMAGEM ARQUIVO.GIF, EM SEU TAMANHO ORIGINAL E SEM MOLDURA.

EXEMPLO

CASO DESEJEMOS ESPECIFICAR UMA MOLDURA PARA UMA IMAGEM INTRODUZIMOS O MODIFICADOR BORDER=X NA TAG. PARA UMA MOLDURA DE 5 PIXELS DE ESPESSURA, A TAG FICARIA DA SEGUINTE FORMA:

< IMG SRC="ARQUIVO.GIF" BORDER=5 >

SE QUISERMOS ESPECIFICAR A ALTURA E A LARGURA DA IMAGEM. FAREMOS USO DOS MODIFICADORES HEIGHT E WIDTH, RESPECTIVAMENTE. ASSIM, SE NOSSA IMAGEM DESTINA-SE A SER EXIBIDA NO TAMANHO DE 256 PIXELS DE LARGURA, POR 192 PIXELS DE ALTURA, MANTENDO-SE A MOLDURA DE 5 PIXELS, A TAG FICARIA ASSIM:

< IMG SRC="ARQUIVO.GIF" WIDTH=256 HEIGHT=192 BORDER=5 >

PRATIQUE NO MICRO

PRIMEIRO, VOCÊ VAI PRECISAR DE UMA IMAGEM, PEQUENA, DE PREFERÊNCIA.

NO EXEMPLO, FOI USADO UM GIF DE 257X230. NÃO É PRECISO SER FIEL A ESSAS MEDIDAS. SALVE O GIF NO DIRETORIO C:\DADOS\WWW, SOB O NOME IMAGEM.GIF .

AGORA, VAMOS CRIAR UMA PÁGINA COM O SEGUINTE CÓDIGO-FONTE :





EXEMPLO DE ELEMENTO MODIFICADOR

< HTML >

< HEAD >

< TITLE >

< / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< CENTER >

EXEMPLO DE MODIFICADORES

< BR > < BR > < BR >

< IMG SRC="IMAGEM1.GIF "

< IMG SRC="IMAGEM1.GIF" BORDER=4 >

< / CENTER >

< / BODY >

< / HTML >

O RESULTADO DESSA PÁGINA EXIBIDA NO NETSCAPE É O SEGUINTE:

PÁGINA EXIBIDA NO NETSCAPE. REPARE NO DESNÍVEL CAUSADO PELA BORDA DA IMAGEM À DIREITA .

NESSE EXEMPLO, PODEMOS VER O USO DE TAGS ISOLADAS, COMO < BR >, E O USO DE UM ELEMENTO MODIFICADOR NA SEGUNDA OCORRÊNCIA DO ARQUIVO IMAGEM1.GIF .

REPARE TAMBÉM NO TEXTO "EXEMPLO DE MODIFICADORES", QUE COMO NÃO ESTÁ ENTRE OS SÍMBOLOS DE TAGS "< E >" É TRATADO COMO TEXTO COMUM.

A TAG DE CENTRALIZAÇÃO, < CENTER >, É USADA UMA ÚNICA VEZ, PARA CENTRALIZAR O TEXTO E AS DUAS IMAGENS. ELA NÃO TEM QUALQUER INFLUÊNCIA SOBRE AS TAGS < BR > .





LIÇÃO 9 - VALORES

CONCEITO

EM HTML, OS VALORES PODEM SER EXPRESSOS COM OU SEM ASPAS. NÃO IMPORTA SE NO EXEMPLO DA LIÇÃO 8, VOCÊ DIGITOU BORDER=5 OU BORDER="5" .

O EFEITO É O MESMO. ESSA É MAIS UMA DAS FACILIDADES PARA O DESENVOLVEDOR DE HOME PAGES. A LINGUAGEM SE ADAPTA A VOCÊ, E NÃO O CONTRÁRIO.

DO LADO RUIM, ALGUNS ELEMENTOS ACEITAM VALORES EM HEXADECIMAL , OUTROS SOMENTE EM DECIMAL E OUTROS EM AMBOS .

EXEMPLO

AS TAGS:

< BODY BGCOLOR=#00FF25 > E < BODY BGCOLOR="#00FF25" >

SÃO IDÊNTICAS. O BROWSER NÃO FAZ QUALQUER DIFERENÇA ENTRE ELAS.

PRATIQUE NO MICRO

MODIFIQUE AS PÁGINAS JÁ CONSTRUÍDAS ATÉ AGORA E RETIRE AS ASPAS DE TODOS OS VALORES. ANALISE O RESULTADO E VEJA SE VOCÊ PREFERE QUE SEUS DOCUMENTOS TENHAM OS VALORES EXPRESSOS COM OU SEM ASPAS .

ESSA REGRA É VÁLIDA INCLUSIVE PARA NOMES DE ARQUIVOS. RETIRE AS ASPAS DA CHAMADA PARA O ARQUIVO IMAGEM.GIF, NO EXERCÍCIO DA LIÇÃO 8 E VEJA COMO A PÁGINA CONTINUA SENDO EXIBIDA CORRETAMENTE. MAS CUIDADO ! NOMES COM ESPAÇOS , OU MUITO GRANDES , PODEM E VÃO GERAR PROBLEMAS , SE FOREM DEFINIDOS SEM ASPAS .

TOME CONHECIMENTO DA POSSIBILIDADE , MAS PREFIRA SEMPRE MANTER AS ASPAS EM NOMES DE ARQUIVOS E URLS .

LIÇÃO 10 - TEXTO PURO

CONCEITO

A VANTAGEM DO HTML PARA A INTRODUÇÃO DE TEXTOS EM UMA HOME PAGE É QUE BASTA SAIR DIGITANDO , E TEMOS ALGUM RESULTADO .





NA VERDADE HÁ ALGUNS COMPLICADORES, COMO A ACENTUAÇÃO. MAS ISSO SERÁ VISTO MAIS ADIANTE. POR ENQUANTO, BASTA SABER QUE QUALQUER COISA QUE NÃO ESTEJA ENTRE OS SINAIS DE TAG. "< E >", É CONSIDERADO TEXTO , E EXIBIDO NORMALMENTE .

LEMBRE-SE SEMPRE DE SEPARAR AS LINHAS COM UM < BR > , E OS PARÁGRAFOS COM DOIS ( < BR > < BR > ). QUALQUER ENTER QUE SE DIGITE QUANDO DA EDIÇÃO DO DOCUMENTO HTML, É DESPREZADO, NÃO CUSTA LEMBRAR.

EXEMPLO

VAMOS PEGAR UM PEQUENO TEXTO, E DIGITÁ-LO EM UMA PÁGINA SIMPLES:

< HTML >

< HEAD >

< TITLE > EXEMPLO DE TEXTO < / TITLE >

< / HEAD >

< BODY >

< BR > < BR > < BR >

CONFORME O MODELO MATEMÁTICO , O PEQUENO VEÍCULO TANGENCIOU A CURVA ,

SEGUINDO DIRETO PARA PARA BARRANCO PRÓXIMO . QUANDO A QUEDA SE

MOSTROU

INEXORÁVEL , O PEQUENO MÓDULO DECIDIU SER HORA DE AGIR . O

INFLAVERMELHO

JÁ HAVIA IDENTIFICADO APENAS UM OCUPANTE NO VEÍCULO , E ESSA

INFORMAÇÃO

FOI ANEXADA AO PACOTE DE DADOS , QUE ESTAVA SENDO ENVIADO AO

POSTO DOS

PARAMÉDICOS, JUNTO COM TODOS OS OUTROS DADOS, COMO A GRAVAÇÃO

DO ACIDENTE

E O LOCAL ONDE O CARRO SE ENCONTRAVA .

FEITO ISSO , O MÓDULO SE DESINCUMBIU DE SUAS RESPONSABILIDADES , E

LIBEROU A PEQUENA FRAÇÃO DE PROCESSAMENTO UTILIZADA NO

ACOMPANHAMENTO

DO ACIDENTE . ACOMPANHADO CENTENAS DE VEÍCULOS SUMULTANEAMENTE , O

NÚCLEO CENTRAL SEQUER PERCEBEU O AUMENTO DE , 4% NA

DISPONIBILIDADE

DE PROCESSAMENTO QUANDO A FUGAZ VIDA DO PROGRAMA DE CONTROLE DE

ACIDENTES CHEGOU AO FIM. DE QUALQUER FORMA , QUANDO ELE FOSSE

NECESSÁRIO DE NOVO , SERIA RENASCIDO DAS CINZAS .

OU DO SILÍCIO , PARA SER MAIS EXATO .

< / BODY >

< / HTML >





A ÚNICA "ATRAÇÃO" DESSA PÁGINA SÃO OS TRÊS < BR > USADOS PARA PULAR ALGUMAS LINHAS NO COMEÇO DO DOCUMENTO . UMA SIMPLES EXIGÊNCIA ESTÉTICA .

AO EXIBIR NO BROWSER ESSA PÁGINA , TEMOS :

PÁGINA ANTERIOR, COMO VISTA NO NETSCAPE

AS LINHAS , TÃO BEM SEPARADAS NO DOCUMENTO-FONTE , SÃO COLADAS UMAS AS OUTRAS DE UMA FORMA BEM FEIA . A SEPARAÇÃO ENTRE OS DOIS PARÁGRAFOS TAMBÉM DEIXOU DE EXISTIR . MAS TUDO ISSO PODE SER REMEDIADO .

COM AS TAGS < BR > AO FINAL DE CADA LINHA DE TEXTO NO DOCUMENTO-FONTE , CONSEGUIREMOS UMA FORMATAÇÃO MELHOR .

PRATIQUE NO MICRO

COM A DICA DO ÚLTIMO PARÁGRAFO , MODIFIQUE A PÁGINA PARA QUE ELA TENHA UMA APARÊNCIA MAIS BEM-ACABADA , COM A IMAGEM ABAIXO . MOVA ALGUMAS PALAVRAS PARA CIMA OU PARA BAIXO , CONSEGUINDO UM BOM ALINHAMENTO VISUAL. E NÃO SE ESQUEÇA DE ACRESCENTAR OS < BR > AO FINAL DAS LINHAS .





PÁGINA IDÊNTICA AO EXEMPLO DESTA LIÇÃO , MAS COM FORMATAÇÃO MAIS BEM-CUIDADA , USANDO APENAS AS TAGS ENSINADAS ATÉ AGORA .

VOCÊ NÃO ESQUECEU DE USAR O MODIFICADOR BGCOLOR=#FFFFFF , DA TAG < BODY > , PARA MUDAR O FUNDO DE CINZA PARA BRANCO , NÃO É MESMO ?





UNIDADE III

TEXTO

AGORA APRENDEREMOS A FORMATAR E ALINHAR O TEXTO DE SUA PÁGINA HTML .

VAMOS ESTUDAR AS VÁRIAS POSSIBILIDADES DA TAG E MOSTAR COMO, MESMO SEM UMA IMAGEM, PODE-SE CRIAR UMA PÁGINA APRESENTÁVEL E, O QUE É SEMPRE UMA VANTAGEM NA INTERNET, EXTREMAMENTE RÁPIDA NA HORA DE SER EXIBIDA. PARA MAIS UM POUCO DE FLEXIBILIDADE NA MANIPULAÇÃO DE TEXTOS. VÁ À UNIDADE CORES E VEJA AS LIÇÕES SOBRE TEXTO COLORIDO.





LIÇÃO 1 - FORMATAÇÃO DE TEXTOS

CONCEITO

EM HTML, QUANDO UMA TAG É INCLUÍDA EM UMA PORÇÃO DO TEXTO , ELA AFETA TODO O DOCUMENTO , A PARTIR DAQUELE PONTO . SE FOR UMA TAG ISOLADA , O EFEITO SERÁ LOCAL. A MENOS QUE SEJA UMA TAG ISOLADA DEFININDO CARACTERÍSTICAS GLOBAIS . JÁ AS TAGS COMPOSTAS CESSAM SEU EFEITO NO MOMENTO EM QUE SÃO ENCONTRADOS SEUS COMPLEMENTOS NO TEXTO .

EXEMPLO

VAMOS USAR O SEGUINTE DOCUMENTO , EM TODOS OS EXEMPLOS DESTA UNIDADE :

< HTML >

< HEAD >

< TITLE > EXEMPLOS DE TEXTO < / TITLE >

< / HEAD >

< BODY >

< BR > < BR > < BR >

I MUST DOWN TO THE SEAS AGAIN , TO THE LONELY SEA ABD THE SKY ,


AND ALL I ASK IS A TALL SHIP AND A STAR TO STEER HER BY .


AND THE WHEEK'S KICK AND THE WIND'S SONG AND THE WHITE SAIL'S

SHAKING . < BR >

AND A GRAY MIST ON THE'S FACE AND A GRAY DAWN BREAKING .

< BR > < BR >

JOHN MASEFIELD 1878-1967 < BR >

SEA FEVER [1902], ST. 1

< / BODY >

< / HTML >

PÁGINA BÁSICA , COM UM TEXTO DO POETA JOHN MASEFIELD .





A FORMATAÇÃO DESTA PÁGINA É A MÍNIMA . O TEXTO ESTÁ APENAS SEPARADO COM QUEBRAS DE LINHA , < BR > , SUGIRO ( É UM BOM NOME , NÃO ? ) QUE VOCÊ MANTENHA UMA CÓPIA DO NETSCAPE E DO NOTEPAD ABERTAS , E APÓS AS ALTERAÇÕES , CLIQUE NO BOTÃO RELOAD DO BROWSER . ISSO TORNARÁ O PROCESSO DE ESTUDO MAIS RÁPIDO .

PRATIQUE NO MICRO

CRIE E EXIBA O DOCUMENTO ACIMA E GUARDE-O PARA FUTURAS MODIFICAÇÕES .

LIÇÃO 2 - RECURSOS DISPONÍVEIS

CONCEITO

AS POSSIBILIDADES DE FORMATAÇÃO DO HTML , EMBORA BASTANTE INTERESSANTES PARA QUEM UTILIZOU OS ANTEDILUVIANOS WORDSTARS E CHIWRITERS , AINDA ESTÃO BEM AQUÉM DAS OFERECIDAS POR PROGRAMAS SIMPLES , COMO O WINDOWS WRITE OU O WORDPAD . AINDA NÃO É POSSÍVEL , POR EXEMPLO , JUSTIFICAR UM TEXTO .

COM O ARQUIVO DO HTML , PORÉM , EM BREVE VEREMOS NOVAS TAGS , QUE PREENCHERÃO AS LACUNAS EXISTENTES .

COM O AVANÇO DO HTML , PORÉM , EM BREVE VEREMOS NOVAS TAGS , QUE PREENCHERÃO AS LACUNAS EXISTENTES .

OS USUÁRIOS MAIS EXPERIENTES , INCLUSIVE , UTILIZAM DIVERSAS TÉCNICAS ALTERNATIVAS PARA SIMULAR RECURSOS INEXISTENTES NO HTML PADRÃO . PODEMOS USAR TEXTOS DENTRO DE TABELAS PARA SIMULAR COLUNAS , IMAGENS INVISÍVEIS E MUITO MAIS .

EVITAREMOS , TAMBÉM , TRATAR DE TAGS RESTRITAS A UM ÚNICO BROWSER , QUE TENHAM BENEFÍCIOS INSUFICIENTES PARA JUSTIFICAR SUA EXCLUSIVIDADE .

EXEMPLO

PODEMOS TER VÁRIOS TIPOS DE EFEITOS DE FORMATAÇÃO EM UM TEXTO HTML , ENTRE ELES :

( ) NEGRITO

( ) SUBLINHADO

( ) ITÁLICO

( ) TUDO COMBINADO





PRATIQUE NO MICRO

PESQUISE NA INTERNET DIVERSAS FORMAS DE FORMATAÇÃO DE TEXTOS . VEJA NO SITE HTTP://WWW.HIGHWAY.COM.BR/USERS/CARDOSO/CARDOSO.HTM UM EXEMPLO DE USO DE TABELAS E GIFS PARA FORMATAR TEXTOS DE FORMA NÃO-CONVENCIONAL .

LIÇÃO 3 - DEFININDO O TAMANHO DA FONTE

CONCEITO

EM UM DOCUMENTO HTML, TEMOS UM TAMANHO ARBITRÁRIO DE FONTE , QUE DEPENDE DO ESPAÇO OCUPADO PELA JANELA DO BROWSER E DA RESOLUÇÃO GRÁFICA DO COMPUTADOR DO USUÁRIO . ISSO GARANTE QUE UMA FONTE CORPO 12 , QUE FICARIA BEM VISÍVEL EM UM MONITOR EXIBINDO 800X600 , NÃO FIQUE INVÍSIVEL , AO SER VISUALIZADA EM UMA SILICON GRAPHICS A 2857X2125 .

AS FONTES RESPEITAM UMA SEQUÊNCIA DE TAMANHOS RELATIVOS QUE VAI DE 1 A 7 . O DEFAULT É 3 . PARA DEFINIR UM TAMANHO DE FONTE PADRÃO PARA SUA PÁGINA , DIFERENTE DE TRÊS , USE A TAG :

< BASEFONT SIZE="N" >

SEMPRE COMO A PRIMEIRA LINHA APÓS A TAG < BODY > . O VALOR DE "N" PODE SER QUALQUER INTEIRO DE 1 E 7 . VALORES NEGATIVOS SERÃO ENTENDIDOS COMO "1" E VALORES POSITIVOS ACIMA DE 7 SERÃO ENTENDIDOS COMO "7" .

EXEMPLO

VEJAMOS COMO FICA A NOSSA PÁGINA , COM A SEGUINTE ALTERAÇÃO :

< BODY >

< BASEFONT SIZE="5" >

PÁGINA DE TESTE, COM INCLUSÃO DE TAG < BASEFONT SIZE="5" > .





PRATIQUE NO MICRO

EXPERIMENTE VÁRIOS VALORES DA TAG < BASEFONT SIZE="N" > . EXPERIMENTE INTRODUZIR A TAG , COM VALORES DIFERENTES , ENTRE AS ESTROFES DO POEMA .

LIÇÃO 4 - MODIFICANDO O TAMANHO DA FONTE

CONCEITO

COM O TAMANHO DA FONTE DEFINIDO PELA TAG < BASEFONT SIZE="N" > , OU ACEITANDO O VALOR DEFAULT , PODEMOS USAR VALORES RELATIVOS PARA UM TRECHO DO TEXTO , OU MESMO UM CARACTERE . ASSIM , AUMENTAMOS OU DIMINUÍMOS NOSSO TEXTO , DE FORMA PROPORCIONAL . A TAG PARA AUMENTAR OU DIMINUIR O TAMANHO DE UM TRECHO DO TEXTO É :

TEXTO AFETADO PELA TAG < / FONT >

PODEMOS ESPECIFICAR VALORES RELATIVOS OU ABSOLUTOS . UM SINAL DE EDIÇÃO -"+" OU UM DE SUBTRAÇÃO -"-" ANTES DO VALOR "N" INDICA QUE O TEXTO A SEGUIR DEVE SER DIMENSIONADO N UNIDADES ACIMA OU ABAIXO DO TAMANHO ATUAL DO TEXTO . UM VALOR SEM SINAL INDICA APENAS QUE O TEXTO A SEGUIR DEVER SER EXIBIDO NO TAMANHO N .

OS VALORES VALIDOS VAO DE -7 A +7 , MAS NA PRÁTICA , TUDO DEPENDE DO TAMANHO DEFAULT DA FONTE . SE USARMOS OS VALORES PADRÃO , QUE ESPECIFICAM < BASEFONT SIZE=3 > , TEREMOS OS SEGUINTES VALORES VÁLIDOS PARA < FONT SIZE=-N > :-1 E -2 E PARA < FONT SIZE=+N > : +1,+2,+3 E +4 . VALORES SUPERIORES OU INFERIORES A ESSES , LEVAM O BROWSER AOS LIMITES DAS FONTES , QUE SEMPRE OSCILAM ENTRE 1 E 7 .

EXEMPLO

NA LISTAGEM-EXEMPLO, VAMOS USAR VALORES RELATIVOS E ABSOLUTOS PARA A TAG < FONT SIZE=N > , REPARE QUE , ENQUANTO A PRIMEIRA E A TERCEIRA TAG FAZEM USO DE REFERÊNCIAS RELATIVAS , A SEGUNDA OCORRÊNCIA DE < FONT SIZE=N > ALTERA DE FORMA ABSOLUTA O TAMANHO DA FONTE. ASSIM , O TERCEIRO VERSO DO POEMA FICA IMUNE A QUALQUER ALTERAÇÃO NA LINHA < BASEFONT SIZE="N" >

< HTML >

< HEAD >

< TITLE > EXEMPLO DE TEXTO < / TITLE >

< / HEAD >





< BODY >

< BASEFONT SIZE="3" >

< BR > < BR > < BR >

I MUST DOWN TO THE SEAS AGAIN, TO THE LONELY SEA AND THE SKY. < BR >

< FONT SIZE=+2 > AND ALL ASK IS A TALL SHIP AND A STAR TO STEER HER BY .< / FONT > < BR >

< FONT SIZE=3 > AND THE WHELL'S KICK AND THE WIND'S SONG AND THE WHITE SAIL'S SHAKING . < / FONT > < BR >

< FONT SIZE=-1 > AND A GRAY MIST ON THE SEA'S FACE AND A GRAY DAWN BREAKING . < / FONT >

< BR > < BR >

JOHN MASEFIELD 1878 - 1967 < BR >

SEA FEVER [1902], ST. 1 .

< / BODY >

< / HTML >

PÁGINA COM TAMANHO DO TEXTO ALTERADO PELA TAG .

EXPERIMENTE ALTERAR A TAG E VEJA OS RESULTADOS.

PRATIQUE NO MICRO

ANALISE A FIGURA A SEGUIR E TENTE REPRODUZIR O EFEITO, UTILIZANDO AS TAGS .





PÁGINA GERADA COM O AUXÍLIO DE UMA SEQUÊNCIA PROGRESSIVA DE TAGS DE CONTROLE DE TAMANHO DO TEXTO . NÃO SE ENGANE , É UM EFEITO FEIO E FICA PIOR QUANDO ACRESCENTAMOS CORES .

LIÇÃO 5 - TEXTO EM NEGRITO

CONCEITO

OU, COMO OS USUÁRIOS DE COMPUTADOR COSTUMAM DIZER, BOLD . UM TEXTO EM BOLD É APENAS UMA VERSÃO MAIS ENCORPADA DA FONTE UTILIZADA E É USADO PARA DESTACAR PARTES DO TEXTO , SEM PRECISAR RECORRER AO RECURSO DESELEGANTE DE DEIXAR O TEXTO EM MAIÚSCULAS .

PARA QUE UM TEXTO , TRECHO OU CARACTERES SEJA EXIBIDO EM BOLD , BASTA QUE ELE ESTEJA ENCERRADO ENTRE AS TAGS :

TEXTO EM NEGRITO

EXEMPLO

UTILIZANDO NOSSA VELHA PÁGINA , DA LIÇÃO 1 , MAS ALTERANDO A SEGUNDA LINHA DO POEMA , PARA :

< B > AND ALL I ASK IS A TALL SHIP AND A STAR TO STEER HER BY .< / B > < BR >

O RESULTADO SERÁ UMA PÁGINA MAIS OU MEMOS ASSIM :





PÁGINA DEMONSTRANDO O USO DE TEXTO EM BOLD .

PRATIQUE NO MICRO

NA PÁGINA ANTERIOR , ALTERE UM VERSO PARA QUE AS LETRAS , DE FORMA ALTERNADA , FIQUEM EM BOLD E NORMAIS .

LIÇÃO 6 - TEXTO ITÁLICO

CONCEITO

O ITÁLICO É UM DOS RECURSOS TIPOGRÁFICOS MAIS USADOS . É PRATICAMENTE OBRIGATÓRIO QUANDO QUEREMOS RESSALTAR TERMOS EM LÍNGUA ESTRANGEIRA EM UM TEXTO , COMO SALZBURG , CUP D'ETAT E PONN-FAR . UMA SÉRIE DE TAGS OBSOLETAS EM HTML NADA MAIS FAZIAM , ALÉM DE COLOCAR O TEXTO EM ITÁLICO .

PARA ITALIZAR UM TEXTO , APENAS COLOQUE-O ENTRE AS TAGS :

< I > TEXTO EM ITÁLICO < / I >

EXEMPLO

SUBSTITUINDO A SEGUNDA LINHA DO NOSSO POEMA , POR :

< I > AND ALL I ASK IS A TALL SHIP AND A STAR TO STEER GER BY . < / I > < BR >

TEMOS O RESULTADO :





LINHA EM ITÁLICO , GRAÇAS A UTILIZAÇÃO DA TAG < I > < / I >.

PRATIQUE NO MICRO

ESCREVA UMA PÁGINA E EXPERIMENTE DESTACAR PALAVRAS EM NEGRITO E EM ITÁLICO . DESCUBRA AS MELHORES SITUAÇÕES PARA CADA TAG .

LIÇÃO 7 - TEXTO SUBLINHADO

CONCEITO

O TEXTO SUBLINHADO DEVE SER USADO COM PARCIMÔNIA , PARA NÃO SER CONFUNDIDO COM UM LINK . CASO SEJA PRECISO , USE-O , MAS NÃO ACRESCENTE BOLD AO TEXTO , SOB PENA DE DEIXÁ-LO MAIS PARECIDO AINDA COM UM LINK .

PARA SUBLINHAR UM TEXTO, USE A TAG :

< U > TEXTO SUBLINHADO < / U >

EXEMPLO

EM NOSSO VELHO EXEMPLO , MUDANDO ( DE NOVO ) A SEGUNDA LINHA DO POEMA PARA :

< I > AND ALL I ASK IS A TALL SHIP AND A STAR TO STEER HER BY . < / I > < BR >

O RESULTADO SERÁ:





INTERNET EXPLORER , EXIBINDO TEXTO SUBLINHADO .

SE VOCÊ NÃO VIU O TEXTO SUBLINHADO NO NETSCAPE , NÃO SE ASUSTE .

ELE NÃO SUPORTA A TAG DE TEXTO SUBLINHADO E SIMPLESMENTE A IGNORA . TALVEZ NA VERSÃO 3.0 ESSE RECURSO JÁ ESTEJA IMPLEMENTADO . O INTERNET EXPLORER , POR SUA VEZ , A RECONHECE .

PRATIQUE NO MICRO

CRIE UMA PÁGINA COM O TEXTO TODO EM ITÁLICO . VEJA COMO ESSE BELO RECURSO PERDE A FORÇA , QUANDO NÃO É USADO COM PARCIMÔNIA .

LIÇÃO 8 - SOBRESCRITO E SUBESCRITO

CONCEITO

É IMPERDOÁVEL QUE O INTERNET EXPLORER NÃO RECONHEÇA AS TAGS DE TEXTO SUBSCRITO E SOBRESCRITO . ELAS SÃO ESSENCIAIS PARA MUITAS E MUITAS TAREFAS , EM PORTUGUÊS . SEJA O "AZINHO" DE "1a" , SEJA O EXPOENTE DE UMA EQUAÇÃO , COMO A2=B2+C2 , OU EM [A1,A2,...1N] . FELIZMENTE O NETSCAPE NÃO NOS DEIXA NA MÃO E PARA FORMATAR TEXTO COM ESSES RECURSOS , BASTA USARMOS AS TAGS :

< SUP > TEXTO SOBRESCRITO < / SUP >

E

< SUB > TEXTO SUBESCRITO < / SUB >





EXEMPLO

VEJAMOS A SEGUINTE PÁGINA :

PÁGINA COM TEXTO SUB E SOBRESCRITO , CONFORME EXIBIDA PELO NETSCAPE .

A LISTAGEM-FONTE DESSA PÁGINA É :

< HTML >

< HEAD >

< BODY >

< BR > < BR > < BR >

I MUST DOWN TO THE SEAS AGAIN , TO THE LONELY SEA AND THE SKY .


AND ALL I ASK IS A < SUP >TALL SHIP AND A STAR< / SUP > TO STEER HER BY . < BR >

AND THE WHEEL'S KICK AND < SUB >THE WIND'S SONG < / SUB > AND THE WHITE SAIL'S SHAKING . < BR >

AND A GRAY MIST ON THE SEA'S FACE AND A GRAY DAWN BREAKING .

< BR > < BR >

JOHN MASEFIELD 1878-1967 < BR >

SEA FEVER [1902], ST. 1

< / BODY >

< / HTML >

OS NEGRITOS SÃO DO AUTOR (EU) , PARA QUE VOCÊ POSSA ENCONTRAR MAIS FACILMENTE AS TAGS UTILIZADAS .





PRATIQUE NO MICRO

TIRE DA GAVETA ALGUNS LIVROS DE MATEMÁTICA EMPOEIRADOS E TENTE REPRODUZIR ALGUMAS EQUAÇÕES EM HTML .

LIÇÃO 9 - TEXTO ... PISCANDO

CONCEITO

ERA O QUE FALTAVA. SABE-SE LÁ POR QUE A NETSCAPE INVENTOU UMA TAG QUE FAZ SEU TEXTO ... PISCAR . É POUCO UTILIZADA , É CONSIDERADA BREGA . VOCÊ NÃO DEVE UTILIZÁ-LA SEM UM BOM MOTIVO . MAS SE VOCÊ DESEJA MESMO , A TAG É :

< BLINK > TEXTO PISCANDO < / BLINK >

EXEMPLO

ALTERANDO NOSSA PÁGINA DE TESTES , TEMOS A SEGUINTE LISTAGEM :

< HTML>

< HEAD >

< TITLE > EXEMPLOS DE TEXTO < / TITLE >

< / HEAD >

< BODY >

< BR > < BR > < BR >

< BLINK >

I MUST DOWN TO THE SEAS AGAIN , TO THE LONELY SEA AND THE SKY .


AND ALL I ASK IS A TALL SHIP AND A STAR TO STEER HER BY .


AND THE WHEEL'S KICK AND THE WIND'S SONG AND THE WHITE SAIL'S SHAKING .


< / BLINK >

< BR > < BR >

JOHN MASEFIELD 1878-1967 < BR >

SEA FEVER [1902], ST. 1

< / BODY >

< / HTML >

POR ABSOLUTA FALTA DE RECURSOS MULTIMÍDIA , FICA IMPOSSÍVEL IMPRIMIR UMA REPRODUÇÃO DA PÁGINA PISCANDO . FAÇA COM QUE SEU BROWSER EXIBA A PÁGINA E VEJA POR SI SÓ ESSA MARAVILHA DE BREGUICE .





PRATIQUE NO MICRO

CRIE UMA PÁGINA COM A SEGUINTE FRASE : "EU NÃO DEVO JAMAIS USAR O BLINK" . EM TAMANHO 7 , PISCANDO . FITE-A ATENTAMENTE DURANTE 527 PISCADELAS .

LIÇÃO 10 - A TAG DE PARÁGRAFO

CONCEITO

QUANDO QUEREMOS ALINHAR UM TEXTO EM RELAÇÃO À PÁGINA , USAMOS A TAG DE PARÁGRAFO . ELA TANTO PODE SER UMA TAG COMPOSTA , QUANTO UMA TAG ISOLADA . QUANDO USADA DE FORMA ISOLADA , APENAS SUBSTITUI A TAG < BR > NAS QUEBRAS DE LINHAS . SE USADA DE FORMA COMPOSTA , REPRESENTA UM IMPORTANTE PAPEL PARA O ALINHAMENTO DOS TEXTOS .

A SINTAXE DA TAG DE PARÁGRAFO É :

< P ALIGN=LEFT | CENTER | RIGHT > TEXTO DO PARÁGRAFO < / P >

O ELEMENTO ALIGN NÃO É OBRIGATÓRIO . MAIS ASSIM A TAG PASSA A SER CONSIDERADA ISOLADA .

EXEMPLO

VAMOS USAR A TAG DE PARÁGRAFO PARA ALINHAR NOSSO POEMA À DIREITA DA PÁGINA . NOTE QUE AS TAGS < BR > FORAM MANTIDAS .

EXEMPLO DE ALINHAMENTO COM A TAG < P ALIGN=RIGHT >





A LISTAGEM COMPLETA É :

< HTML >

< HEAD >

< TITLE > EXEMPLOS DE TEXTO < / TITLE >

< / HEAD >

< BODY >

< BR > < BR > < BR >

I MUST DOWN TO THE SEAS AGAIN , TO THE LONELY SEA AND THE SKY . < BR >

AND ALL I ASK IS A TALL SHIP AND A STAR TO STEER HER BY . < BR >

AND THE WEEL'S KICK AND THE WIND'S SONG AND THE WHITE SAIL'S SHAKING . < BR >

AND A GRAY MIST ON THE SEA'S FACE AND A GRAY DAWN BREAKING .

< BR > < BR >

JOHN MASEFIELD 1878-1967 < BR >

SEA FEVER [1902], ST. 1

< / P >

< / BODY >

< / HTML >

PRATIQUE NO MICRO

EXEPRIMENTE TROCAR OS < BR > AO FINAL DAS LINHAS , POR < P > NO INÍCIO DELAS .

LIÇÃO 11 - TEXTO PRÉ-FORMATADO

CONCEITO

OK, EXISTE UMA MANEIRA DE FAZER COM QUE O BROWSER INTERPRETE O ENTER AO FINAL DE CADA LINHA DE TEXTO COMO UMA QUEBRA. ALIAS, OS ESPAÇOS TAMBÉM. E TUDO O MAIS QUE FOR ALINHADO OU DIGITADO.

COM A TAG DE TEXTO PRÉ-FORMATADO, PODE-SE EXIBIR LISTAGENS DE PROGRAMAS, TABELAS E POEMAS, TAL COMO FORAM ARRUMADOS POR SEUS CRIADORES. PARA POSSIBILITAR ISSO, O BROWSER UTILIZA UMA FONTE MONOESPAÇADA, COMO COURIER. ISSO TORNA O TEXTO ESTETICAMENTE MENOS INTERESSANTE, MAS É ÓTIMO PARA LISTAGEM DE PROGRAMAS.

A TAG PARA TEXTO PRÉ-FORMATADO É:

< PRE WIDTH=NN > TEXTO A SER FORMATADO < / PRE >





O ELEMENTO WIDTH É OPCIONAL E NELE INDICAMOS A LARGURA MÁXIMA , EM CARACTERES , QUE NOSSO TEXTO PODE TER ANTES QUE O BROWSER FORCE UMA QUEBRA DE LINHA .

EXEMPLO

VAMOS PEGAR UM POEMA DO BOM E VELHO WALT WHITMAN , AQUELE DO CARPE DIEM . VAMOS DIGITÁ-LO COMO O AUTOR O FEZ , MAS COM A TAG DE TEXTO PRÉ-FORMATADO . AO FINAL , O DOCUMENTO-FONTE FICARÁ ASSIM :

< HTML >

< HEAD > < TITLE > EXEMPLO DE TEXTO COLORIDO < / TITLE >

< / HEAD >

< BODY BGCOLOR="WHITE" >

< PRE >

WALT WHITMAN 1819-1892

I THINK I COULD TURN AND LIVE WITH ANIMALS , THEY ARE SO PLACID AND SELF-CONTAINED .

I STAND AND LOOK AT THEM LONG AND LONG .

THEY DO NOT SWEAT AND WHINE ABOUT THEIR CONDITION .

THEY DO NOT LIE AWAKE IN THE DARK AND WEEP FOR THEIR SINS .

THEY DO NOT MAKE ME SICK DISCUSSING THEIR DUTY TO GOD .

NOT ONE IS DISSATISFIED , NOT ONE IS DEMEND WITH THE MANIA OF OWNING THINGS .

NOT ONE KNEELS TO ANOTHER , NOR TO HIS KING THAT LIVED THOUSANDS OF YEARS AGO .

NOT ONE IS RESPECTABLE OR UNHAPPY OVER THE WHOLE EARTH .

LEAVES OF GRASS [1855-192] . SONG OF MYSELF , 32

< / PRE >

< / BODY >

E A PÁGINA FORMATADA ASSUMIRÁ A SEGUINTE FEIÇÃO :





PÁGINA FORMATADA COM A TAG < PRE > .

PRATIQUE NO MICRO

PEGUE UM DOS LIVROS DO LEON ELIACHAR E TENTE FORMATAR PARA HTML ALGUNS DOS POEMAS CONCRETOS QUE ELE PRODUZIU , AS BRINCADEIRAS COM MÁQUINAS DE ESCREVER DARÃO BELAS HOME PAGES . GUARDE-AS E CRIE UM SITE PARA ESSE GRANDE ESCRITOR E HUMORISTA . ELE MERECE .

LIÇÃO 12 - TÍTULOS

CONCEITO

PODEMOS DEFINIR , EM HTML , SEIS TAMANHOS DISTINTOS PARA TÍTULOS , INDO DE 1 A 6 , EM PROPORÇÃO DE TAMANHO INVERSA A SEU NÚMERO . OU SEJA : O TÍTULO 1 É MUITO MAIOR QUE O TÍTULO 6 , QUE EQUIVALE AO MENOR TAMANHO DE LETRA EXIBIDO PELO BROWSER , EM BOLD .

AS TAGS DE TÍTULO TÊM , IMPLICITA , UMA QUEBRA DE LINHA . ASSIM , APÓS UM TÍTULO , NÃO PRECISAMOS DA TAG < BR > .

OS TÍTULOS SÃO DEFINIDOS PELAS TAGS :

< H1 > , < H2 > , < H3 > , < H4 > , < H5 > , E < H6 >

E SUAS RESPECTIVAS CONTRAPARTES , < / H1 > E ASSEMELHADOS .





EXEMPLO

VAMOS FORMATAR MELHOR NOSSO POEMA DO MASEFIELD , AGORA COLOCANDO O TÍTULO E O AUTOR EM DESTAQUE. USAREMOS O TÍTULO DE TAMANHO 1 PARA O NOME DO POEMA , E O DE TAMANHO QUATRO PARA O AUTOR . A LISTAGEM FICARÁ ASSIM :

< HTML>

< HEAD >

< TITLE > EXEMPLOS DE TEXTO < / TITLE >

< / HEAD >

< BODY BGCOLOR=WHITE >

< BR > < BR > < BR >

< CENTER >

< H1 > SEA FEVER < / H1 >

< H4 > JOHN MASEFIELD < / H4 >

< BR >

I MUST DOWN TO THE SEAS AGAIN , TO THE LONELY SEA AND THE SKY .


AND ALL I ASK IS A TALL SHIP AND A STAR TO STEER HER BY .


AND THE WHEEL'S KICK AND THE WIND'S SONG AND THE WHITE SAIL'S SHAKING .


AND A GRAY MIST ON THE SEA'S FACE AND A GRAY DAWN BREAKING .

< / CENTER >

< BR > < BR >

< BR >

< / BODY >

< / HTML >

E A IMAGEM RESULTANTE SERÁ ESSA :

IMAGEM RESULTANTE





PRATIQUE NO MICRO

CRIE UMA PÁGINA COM TÍTULOS DOS SEIS TAMANHOS DISPONIVEIS E VEJA A DIFERENÇA ENTRE ELES . NOTE QUE OS TÍTULOS ABAIXO DO TAMANHO 2 DIFICILMENTE SÃO USADOS . SÃO MUITO POUCO SUTIS E OCUPAM DEMASIADO ESPAÇO .

LIÇÃO 13 - LINHAS

CONCEITO

HÁ DOIS MÉTODOS DE SE EXIBIR UMA LINHA , EM HTML . O PRIMEIRO É CARREGAR UMA IMAGEM GRÁFICA . O SEGUNDO , E MAIS RÁPIDO , É USAR A TAG ESPECÍFICA . COM ELA , PODEMOS SEPARAR SEÇÕES , RESSALTAR PARTES DA PÁGINA , E MUITO MAIS . AS LINHAS VÊM EM VÁRIOS TAMANHOS E MODELOS , PODENDO SER SOMBREADAS OU CHEIAS , GRANDES OU PEQUENAS , GROSSAS OU FINAS . A TAG COMPLETA DE LINHA É :

< HR WIDTH=NNN% ALIGN=LEFT \ CNETER | RIGHT SIZE=NN NOSHADE >

CLARO , SE VOCÊ DIGITAR SIMPLESMENTE < HR > EM ALGUM CANTO DA PÁGINA CONSEGUIRÁ UMA LINHA DEFAULT , PERFEITAMENTE ACEITÁVEL . MAS COM A TAG COMPLETA , NÓS TEMOS :

WIDTH=NNN% - INDICA A LARGURA DA LINHA , EM PROPORÇÃO À PÁGINA . SE VOCÊ QUISER UMA LINHA OCUPANDO 100% DA LARGURA DISPONÍVEL , SIMPLESMENTE OMITA ESSE MODIFICADOR . UMA LARGURA DE 45% GERALMENTE JÁ GERA UMA BELA LINHA .

ALIGN=LEFT|CENTER|RIGHT - ALINHA A LINHA ( ESTRANHO , ISSO , ) EM RELAÇÃO Á PÁGINA . UMA LINHA JUSTIFICADA PELA DIREITA , COM UMA NOTA DE COPYRIGHT EMBAIXO , É UMA ESTRUTURA ELEGANTE. SE A LINHA OCUPAR 100% DA LARGURA DISPONÍVEL , ESSE ELEMENTO PERDE O SENTIDO .

SIZE=NN - ESPESSURA DA LINHA , EM PIXELS . QUALQUER COISA ACIMA DE 4 JÁ GERA UM EFEITO FEIO . EVITE .

NOSHADE - COM O USO DESSE ELEMENTO , SUA LINHA DEIXA DE SER UMA BELA SOMBRA E PASSA A SER UM BLOCO SÓLIDO . UMA BOA IDÉIA PARA GERAR PEQUENAS LINHAS SÓLIDAS , MAS CUIDADO COM LINHAS MAIS GROSSAS .





EXEMPLO

VAMOS VER NOSSO POEMA , FORMATADO , AGORA COM LINHAS . A LISTAGEM É A SEGUINTE :

< HTML >

< HEAD >

< TITLE > EXEMPLOS DE TEXTO < / TITLE >

< / HEAD >

< BODY >

< BR > < BR > < BR >

< CENTER >

< H1 > SEA FEVER < / H1 >

< H4 > JOHN MASEFIELD < / H4 >

< HR WIDTH=50% ALIGN=CENTER SIZE=6 >

< BR >

I MUST DOWN TO THE SEAS AGAIN , TO THE LONELY SEA AND THE SKY ,


AND ALL I ASK IS A TALL SHIP AND A STAR TO STEER HER BY ,


AND THE WHEEL'S KICK AND THE WIND'S SONG AND THE WHITE SAIL'S SHAKING .


I MUST A GRAY MIST ON THE SEA'S FACE AND A GRAY DAWN BREAKING .

< / CENTER >

< HR WIDTH=30% ALIGN=CENTER SIZE=2 NOSHADE >

< BR > < BR >

< BR >

< / BODY >

< / HTML >

E A PÁGINA :

PÁGINA COM O POEMA FORMATADO , COM LINHAS DE SEPARAÇÃO .





PRATIQUE NO MICRO

FAÇA UMA PÁGINA SÓ DE LINHAS . EXPERIMENTE USÁ-LAS COMO AUXILIARES NA FORMATAÇÃO DE TÍTULOS . REALCE UM TÍTULO PEQUENO , ALINHANDO-O PELA ESQUERDA , LOGO ACIMA DE UMA LINHA OCUPANDO 75% DA TELA .

LIÇÃO 14 - ACENTUAÇÃO

CONCEITO

CERTO , VOCÊ FOI ENGANADO . APESAR DE SUA PÁGINA SER EXIBIDA PERFEITAMENTE BEM EM PORTUGUÊS , TANTO NO NETSCAPE , QUANTO NO NOTEPAD , VOCÊ NÃO DEVE JAMAIS ACENTUAR DIRETAMENTE SEUS DOCUMENTOS HTML . NÃO HÁ COMO SABER QUAL A TABELA DE CARACTERES QUE SEU USUÁRIO ESTARÁ USANDO . SEQUER PODEMOS GARANTIR QUE ELE ACESSARÁ COM UM PC , UM MAC , UM CRAY , UM N-CUBE , UM AMIGA OU UM SINCLAIR . CADA UMA DESSAS MÁQUINAS TRATA OS CARACTERES DE UMA FORMA E OS ACENTUADOS , ENTÃO , SÃO UM PROBLEMA .

RESOLVE-SE ISSO USANDO A TABELA DE CARATERES PADRÃO CRIADA PELA ISO I INTERNATIONAL STANDARDS ORGANIZATION . UMA ORGANIZAÇÃO QUE CRIA E GERENCIA PADRÕES .

COMO CADA FABRICANTE NÃO VAI ALTERAR SEU COMPUTADOR PARA SE ADEQUAR À TABELA ISO 8859-1 , OS BROWSERS FAZEM INTERNAMENTE A CONVERSÃO . ASSIM , SABE-SE QUE O CARACTERE ISO 195 , DA ESPECIFICAÇÃO ISO-8859-1 , CORRESPONDENTE A UM "Ã" , EM QUALQUE COMPUTADOR .

NÃO BASTA VOCÊ DIGITAR "Ã" E PRONTO . ISSO NÃO É O CARACTERE ISO , O CARACTERE ESPECIAL , NO CASO , É : & ATILDE;

ANTES QUE VOCÊ ARRANQUE OS CABELOS , CALMA. ESSES CARACTERES ESPECIAIS NUNCA SÃO DIGITADOS DIRETAMENTE , SÓ EM OCASIÕES RARAS , COMO UMA ALTERAÇÃO DE EMERGÊNCIA DE UMA PÁGINA. OS BONS SOFTWARES DE EDIÇÃO DE HTML , COMO O HOTDOG , CONVERTEM AUTOMATICAMENTE OS CARACTERES NORMAIS EM CARACTERES ESPECIAIS , À MEDIDA QUE VOCÊ OS DIGITA .

EXEMPLO

VEJAMOS UM TEXTO SIMPLES , COMO UTILIZAMOS EM NOSSOS EXEMPLOS :

“ CUIDADO ! NÃO FAÇA CONFUSÃO COM ESSE NEGÓCIO DE ACENTOS ! ”

USANDO A ACENTUAÇÃO CORRETA EM HTML , FICARIA : " CUIDADO ! N & ATILDE;O FA & CCEDIL;A CONFUS & ATILDE;O COM ESSE NEG & OACUTE;CIO DE ACENTOS ! "





PARA TERMOS MAIOR CLAREZA, VAMOS UTILIZAR ACENTUAÇÃO NORMAL NO DECORRER DESTE LIVRO. LEMBRE-SE SEMPRE, PORÉM, DE QUE QUALQUER PÁGINA DESTINADA A UM PÚBLICO AMPLO DEVE TER SEUS ACENTOS SEGUINDO A NORMA ISO-8859-1. CONSIGA UM BOM EDITOR HTML, E DEIXEI-O TRABALHAR NESSA ÁREA.

PRATIQUE NO MICRO

PESQUISE PÁGINAS EM PORTUGUÊS E VEJA QUAIS SEGUEM E QUAIS NÃO SEGUEM O PADRÃO INTERNACIONAL DE ACENTUAÇÃO ISO-8859-1.

TABELA DE ACENTOS

ABAIXO, UMA TABELA COM OS PRINCIPAIS CARACTERES ACENTUADOS E SEUS CORRESPONDENTES NA TABELA ISO. GUARDE ESTA TABELA, PODE LHE SER ÚTIL.

CARACTERE - CÓDIGO

À - & AGRAVE;

Á - & AACUTE;

 - & ACIRC;

à - & ATILDE;

Ä - & AUML;

A - & ARIG;

AE- & AELING;

Ç - & CCEDIL;

È - & EGRAVE;

É - & EACUTE;

Ê - & ECIRC;

Ë - & EUML;

Ì - & IGRAVE;

Í - & IACUTE;

Î - & ICIRC;

Ï - & IUML;

- - & ETH;





CARACTERE - CÓDIGO

Ñ - & NTILDE;

Ò - & OGRAVE;

Ó - & OACUTE;

Ô - & OCIRC;

Õ - & OTILDE;

Ö - & OUML;

O - & OSLASH;

Ù - & UGRAVE

Ú - & UACUTE

Û - & UCIRC

Ü - & UUML;

Ý - & YACUTE;

& THORN;

-

B - & SZLIG;

À - & AGRAVE;

Á - & ACUTE;

 - & ACIRC;

à - & ATILDE;

Ä - & AU,L;

A - & ARING;

AE- & AELIG;

Ç - & CCEDIL;

È - & EGRAVE;

É - & EACUTE;

Ê - & CIRC;

Ë - & EUML;

Ì - & IGRAVE;

Í - & IACUTE;





CARACTERE - CÓDIGO

Î - & ICIRC;

Ï - & IUML;

E - & ETH;

Ñ - & NTILDE;

Ò - & OGRAVE;

Ó - & OACUTE;

Ô - & OCIRC;

Õ - & OTILDE;

Ö - & OUML;

O - & OSLASH;

Ù - & UGRAVE;

Ú - & UACUTE;

Û - & UCIRC;

Ü - & UUML;

- - & THORN;

Y - & YUML;





UNIDADE IV

GRÁFICOS

NOSSAS PÁGINAS JÁ ESTÃO INTERESSANTES , MAS FALTAM-NOS IMAGENS . NESTA UNIDADE APRENDEREMOS A INSERIR GRÁFICOS , FOTOS E ILUSTRAÇÕES , REDIMENSIONANDO-OS E TRABALHANDO COM DESCRIÇÕES ALTERNATIVAS E IMAGENS DE ALTA E BAIXA RESOLUÇÃO , ALÉM DE UM TRUQUE PARA FAZER SUAS PÁGINAS SEREM CARREGADAS E EXIBIDAS COM MAIS VELOCIDADE .





LIÇÃO 1 - CONSIDERAÇÕES SOBRE GRÁFICOS

CONCEITO

O USO DE IMAGENS EM HOME PAGES PODE RAPIDAMENTEB DEIXAR DE SER UM RECURSO VÁLIDO PARA SE TORNAR UM ABUSO , TANTO DE LARGURA DE BANDA QUANTO DE PACIÊNCIA . EXISTEM PÁGINAS REALMENTE BONITAS QUE LEVAM UMA ETERNIDADE PARA SEREM VISUALIZADAS . OUTRAS SE DÃO AO LUXO DE SEREM FEIAS E GRANDES .

EVITE USAR IMAGENS GRANDES EM SUAS PÁGINAS . DÊ AO USUÁRIO A OPÇÃO DE ESCOLHER SE ELE QUER VER UMA IMAGEM GRANDE .

EXEMPLO

VAMOS AOS NÚMEROS : QUALQUER EM SUAS PÁGINAS DE MAIS DE 40 KB EM UMA HOME-PAGE DEVE SER OLHADA COM SUSPEITA . OS ALGARITMOS DE COMPRESSÃO USADOS EM FORMATOS COMO O JPG POSSIBILITAM TAXAS ALTÍSSIMAS , QUE REDUZEM MUITO O TAMANHO FINAL DE UM ARQUIVO DE IMAGEM .

PRATIQUE NO MICRO

EXPERIMENTE ACESSAR PÁGINAS COM IMAGENS GRANDES . CRONOMETRE QUANTO TEMPO VOCÊ LEVA LENDO UMA PÁGINA E QUANTO TEMPO VOCÊ LEVA ESPERANDO QUE ELA TERMINE DE SER CARREGADA . VOCÊ SE SURPREENDERÁ .

LIÇÃO 2 - FORMATOS DE ARQUIVOS

CONCEITO

OS BROWSERS MAIS USADOS ACEITAM DOIS FORMATOS BÁSICOS DE IMAGEM : GIF E JPEG . CADA UM TEM SUAS VANTAGENS E DESVANTAGENS E A ESCOLHA DO FORMATO UTILIZADO DEVE SEMPRE LEVAR EM CONTA O OBJETIVO E A ORIGEM DA IMAGEM .

EXEMPLO

GIF - É UM FORMATO RÁPIDO , MUITO POUCO PROCESSAMENTO É UTILIZADO PARA QUE UM ARQUIVO GIF SEJA EXIBIDO . EM COMPENSAÇÃO , ESTÁ LIMITADO A 256 CORES . É UM FORMATO DE IMAGEM QUE GUARDA AS INFORMAÇÕES SEM PERDA . PODE SER CARREGADO EM UM EDITOR GRÁFICO , GRAVADO EM DISCO ,





RECARREGADO E REGRAVADO QUANTAS VEZES QUISERMOS . USE GIF PARA ILUSTRAÇÕES , MAPAS E LINE-ARTS , COMO IMAGENS DO CORELDRAW!.

JPEG - É UM FORMATO DE ARQUIVO COM TAXAS DE COMPRESSÃO BEM INTERESSANTES . UMA IMAGEM DE 264KB , COMPRIMIDA EM JPEG , PODE APENAS OCUPAR 35KB , SEM PERDA PERCEPTÍVEL DE QUALIDADE . AS IMAGENS EM JPG SÃO , POR NATUREZA , DE 24 BITS . ISSO SIGNIFICAQUE A COR É MAIS FIEL POSSÍVEL , EM RELAÇÃO AO ORIGINAL. O LADO RUIM É QUE O FORMATO JPEG É ABERTO EM UM EDITOR GRÁFICO , MAIS DADOS SÃO PERDIDOS . O ATO DE GRAVAR REPETIDAMENTE UM ARQUIVO JPEG O LEVARÁ RAPIDAMENTE A UMA CONDIÇÃO DE INAPROVEITÁVEL PARA USO .

ESSE FORMATO É ESPECIALMENTE ÚTIL PARA ARMAZENAR FOTOGRAFIAS .

JPEG, VEM DE JOINT PHOTOGRAPHERS EXPERT GROUP . É UM COMITÊ QUE DESENVOLVEU AS ESPECIFICAÇÕES DO PADRÃO QUE ACABOU LEVANDO O NOME DO GRUPO JPG É A EXTENSÃO USUALMENTE UTILIZADA NOS ARQUIVOS .

PRATIQUE NO MICRO

PESQUISE EM SEU BANCO DE IMAGENS , OU NA PRÓPRIA INTERNET , ALGUMAS FOTOS . VOCÊ PRECISARÁ DELAS PARA OS EXEMPLOS DAS PRÓXIMAS LIÇÕES . RECORTE UM PEDAÇO DE UMA FOTO , E SALVE-O EM FORMATO 250X232 , GIF , COM O NOME ALTA.GIF

LIÇÃO 3 - INSERINDO SUA PRIMEIRA IMAGEM

CONCEITO

VAMOS EXIBIR UMA IMAGEM JUNTO COM O TEXTO EM NOSSA HOME PAGE . ISSO NÃO REQUER PRÁTICA , NEM TAMPOUCO HABILIDADE. BASTA A TAG :

< IMG SRC="ARQUIVO.EXT" >

COM ESSA SIMPLES TAG , DIZEMOS AO BROWSER PARA IMPEDIR , NO PONTO ATUAL DA PÁGINA , O ARQUIVO . A EXTENSÃO PODE SER .GIF OU .JPG . MAS NÃO SE ENGANE . ESSA TAG É A ESSÊNCIA DE TUDO . PRATICAMENTE TODA A MANIPULAÇÃO DE IMAGENS EM HTML , COMEÇA NO < IMG > .





EXEMPLO

VAMOS VER COMO INSERIMOS UMA SIMPLES IMAGEM EM UMA PÁGINA .

USAREMOS A LISTAGEM ABAIXO :

< HTML >

< HEAD >

< TITLE > EXEMPLOS DE IMAGEM < / TITLE >

< / HEAD >

< BODY BGCOLOR=WHITE >

< BR > < BR > < BR >

< CENTER >

< IMG SRC="ALTA.GIF" >

< / CENTER >

< / BODY >

< / HTML >

E O RESULTADO É O SEGUINTE:

PÁGINA GERADA PELA LISTAGEM ANTERIOR

CLARO QUE MUITO PROVAVELMENTE VOCÊ ESTARÁ UTILIZANDO UMA IMAGEM DIFERENTE DA MINHA . MAS SE O TAMANHO ESTIVER CORRETO E SUA PLACA DE VÍDEO ESTIVER CONFIGURADA PARA 800X600 , É MAIS OU MENOS ESSA A PROPORÇÃO QUE VOCÊ TERÁ EM SEU VÍDEO .





PRATIQUE NO MICRO

EXPERIMENTE INSERIR IMAGENS DIFERENTES , COM OUTROS TAMANHOS . FAÇA PÁGINAS COM IMAGENS MUITO PEQUENAS OU MUITO GRANDES E VEJA SE O BROWSER AGÜENTA , OU PEDE CLEMÊNCIA , ATRAVÉS DE UM GPF OU DE UMA OPERAÇÃO ILEGAL .

LIÇÃO 4 - INSERINDO DESCRIÇÃO DA IMAGEM

CONCEITO

MUITAS VEZES CLICAMOS NO STOP ANTES DO TÉRMINO DO DOWNLOAD DE UMA PÁGINA . OUTRAS VEZES , A CONEXÃO CAI SOZINHO OU SIMPLESMENTE O BROWSER NÃO ENCONTRA DETERMINADO ARQUIVO . PARA QUE RECONHEÇAMOS AS IMAGENS , MESMO QUE NÃO TENHAM SIDO CARREGADAS , FOI CRIADO O ELEMENTO ALT . COM ELE , PODEMOS INSERIR UMA BREVE DESCRIÇÃO DE UM ARQUIVO DE IMAGEM .

ESSA DESCRIÇÃO SERÁ EXIBIDA CASO O ARQUIVO NÃO POSSA SER TRANSFERIDO PARA O COMPUTADOR DO USUÁRIO . A SINTAXE É SIMPLES :

< IMG SRC="ARQUIVO.EXT" ALT="DESCRIÇÃO DA IMAGEM" >

EXEMPLO

NA PÁGINA ANTERIOR, TROQUE A OCORRÊNCIA DA TAG < IMG SRC="ALTA.GIF" > POR :

< IMG SRC="ARQUIVO.EXT" ALT="DESCRIÇÃO DA IMAGEM" >

ASSIM VOCÊ ESTÁ INDUZINDO O BROWSER A UM ERRO , PROCURAR POR UM ARQUIVO EM UM SERVIDOR QUE ( AINDA ) NÃO EXISTE. QUANDO DA NEGATIVA , O BROWSER EXIBIRÁ A SEGUINTE TELA :

ELEMENTO ALT EM AÇÃO.





PRATIQUE NO MICRO

NOS EXERCÍCIOS ANTERIORES , EDITE AS PÁGINAS PARA QUE TODAS AS IMAGENS PASSEM A TER UM ELEMENTO ALT .

LIÇÃO 5 - DEFININDO MOLDURAS

CONCEITO

POR DEFAULT , IMAGEM QUE NÃO SEJA UM LINK HIPERTEXTO NÃO APRESENTA MOLDURA . CASO VOCÊ DESEJE UMA MOLDURA EM TORNO DE SUA IMAGEM ACRESCENTE O ELEMENTO :

BORDER=N

NA TAG DE DEFINIÇÃO DA IMAGEM , N PODE SER QUALQUER VALOR RAZOÁVEL EM PIXELS .

EXEMPLO

NOSSA PÁGINA , AGORA COM A SEGUINTE LINHA :

< IMG SRC="ALTA.GIF" BORDER=5 >

EXEMPLO DO ELEMENTO BORDER, APLICADO A UMA IMAGEM .

PRATIQUE NO MICRO

EXPERIMENTE , NA PÁGINA ANTERIOR , VÁRIOS VALORES PARA O ELEMENTO BORDER .





LIÇÃO 6 - DEFININDO DIMENSÕES

CONCEITO

ENTRE AS VÁRIAS INFORMAÇÕES CONTIDAS EM UM ARQUIVO GRÁFICO ESTÃO AS DIMENSÕES DE UMA IMAGEM . ISTO É , O ESPAÇO QUE ELA OCUPA , QUAL A LARGURA , QUAL A ALTURA . ESSAS INFORMAÇÕES SÃO ESSENCIAIS PARA QUE O BROWSER POSSA FORMATAR A PÁGINA . INSERINDO A TAG BÁSICA . < IMG SRC="ARQUIVO.EXT" > , DIZEMOS AO BROWSER : " AQUI ENTRA UMA IMAGEM . DESCUBRA O ESPAÇO QUE ELA VAI OCUPAR , DEPOIS CONTINUE " . ESSA IMPERATIVA FAZ COM QUE A IMAGEM SEJA SOLICITADA AO SERVIDOR E SÓ QUANDO O CABEÇALHO DA MESMA TIVER SIDO TRANSMITIDO O BROWSER PODERÁ LÊ-LO E COMEÇAR A EXIBIR A IMAGEM .

SE USARMOS OS ELEMENTOS WIDTH=NN E HEIGHT=NN , O BROWSER JÁ SABERÁ DE ANTEMÃO QUANTO EM ESPAÇO OCUPARÁ AQUELA IMAGEM . ASSIM , O ESPAÇO SERÁ RESERVADO E A FORMATAÇÃO PROSSEGUIRÁ . A PRIMEIRA COISA QUE É CARREGADA EM UMA HOME PAGE É O TEXTO E NÃO FAZ SENTIDO VOCÊ ESPERAR PELO ÚLTIMO DOS GIFS PARA LER ALGO QUE JÁ ESTÁ EM SEU COMPUTADOR .

DESCUBRA , COM SEU EDITOR GRÁFICO FAVORITO , AS DIMENSÕES DE SUA IMAGEM E SEMPRE COLOQUE OS ELEMENTOS WIDTH E HEIGHT .

EXEMPLO

NOSSA PÁGINA JÁ TRADICIONAL , MAS COM OS ELEMENTOS WIDTH E HEIGHT :

< HTML >

< HEAD >

< TITLE > EXEMPLOS DE IMAGEM < / TITLE >

< / HEAD >

< BODY BGCOLOR=WHITE >

< BR > < BR > < BR >

< CENTER >

< IMG SRC="ALTA.GIF" WIDTH=250 HEIGHT=232 >

< / CENTER >

< / BODY >

< / HTML >





AQUI , A PÁGINA COMO EXIBIDA NO NETSCAPE . REPARE NO ESPAÇO DA IMAGEM , ESTÁ RESERVADO , JÁ NA DIMENSÃO CORRETA . ISSO ANTES DE TER SIDO INICIADA A SUA TRANSFERÊNCIA .

NETSCAPE COM ESPAÇO RESERVADO PARA ARQUIVO .

PRATIQUE NO MICRO

CRIE UMA PÁGINA COM UMAS DEZ OU VINTE IMAGENS GRANDES . TENTE CARREGÁ-LAS NO NETSCAPE. DEPOIS DISSO , INSIRA OS ELEMENTOS WIDTH E HEIGHT EM CADA UMA DELAS . CARREGUE E VEJA A DIFERENÇA DE COMPORTAMENTO DO BROWSER .

LIÇÃO 7 - IMAGEM ALTERNATIVA DE BAIXA RESOLUÇÃO

CONCEITO

UM MÉTODO INTERESSANTE PARA ACELERAR A EXIBIÇÃO DE UM SITE É USAR UMA IMAGEM EM BAIXA RESOLUÇÃO , GERALMENTE EM GRAYSCALE ( TONS DE CINZA ) E DE MENOR TAMANHO , QUE É CARREGADA NO ESPAÇO RESERVADO A UMA IMAGEM MAIOR E MAIS ELABORADA . ASSIM , A PÁGINA É COMPOSTA E DEPOIS QUE TUDO ESTÁ EM SEU LUGAR , O BROWSER REALIZA UMA " SEGUNDA PASSAGEM " , TROCANDO , COM CALMA , OS ARQUIVOS DE BAIXA RESOLUÇÃO PELOS DE ALTA .

A PÁGINA É MONTADA COM BASTANTE RAPIDEZ E SEM OS ESPAÇOS EM BRANCO DEIXADOS PELOS ELEMENTOS WIDTH E HEIGHT PUROS .





MAS NEM POR ISSO DEVE-SE DEIXAR DE UTILIZAR ESSES ELEMENTOS . O ARQUIVO DE BAIXA RESOLUÇÃO GERALMENTE É BEM MENOR , EM DIMENSÕES , QUE O ARQUIVO DE ALTA RESOLUÇÃO . COM O USO DOS ELEMENTOS DE DEFINIÇÃO DE DIMENSÃO , A IMAGEM DE BAIXA RESOLUÇÃO É ESTICADA ATÉ OCUPAR O ESPAÇO PREDETERMINADO .

O ELEMENTO RELATIVO AO ARQUIVO DE BAIXA RESOLUÇÃO , LOWSRC , TRABALHA COM A SEGUINTE SINTAXE :

< IMG SRC="ALTA.EXT" LOWSRC="BAIXA.EXT" WIDTH=NNN HEIGHT=NNN >

EXEMPLO

VAMOS CRIAR UMA CÓPIA DO NOSSO ARQUIVO ALTA.GIF , RENOMEÁ-LA PARA BAIXA.GIF , REDUZIR SUAS CORES PARA GRAYSCALE E SEU TAMANHO PARA 50 PIXELS DE LARGURA. MENOS DA METADE DO ARQUIVO ORIGINAL . ISSO NOS DEIXA COM OS SEGUINTES TAMANHOS DE ARQUIVOS :

ALTA.GIF - 49KB

BAIXA.GIF - 3KB

NOSSA PÁGINA TERÁ A SEGUINTE LISTAGEM-FONTE :

< HTML >

< HEAD >

< TITLE > EXEMPLOS DE IMAGEM < / TITLE >

< / HEAD >

< BODY BGCOLOR=WHITE >

< BR > < BR > < BR >

< CENTER >

< IMG SRC="ALTA.GIF" LOWSRC="BAIXA.GIF" WIDTH=250 HEIGHT=232 >

< / CENTER >

< / BODY >

< / HTML >

E EXIBIRÁ MOMENTANEAMENTE O QUADRADO BRANCO DOS ELEMENTOS WIDTH E HEIGHT , QUANDO CARREGADA . EM SEGUIDA , EXIBIRÁ A IMAGEM BAIXA.GIF , REDIMENSIONADA PARA O TAMANHO DE 250X232 . APÓS UM OU DOIS SEGUNDOS , SERÁ EXIBIDA A IMAGEM FINAL , A ALTA.GIF .

VOCÊ PODE INTERCAMBIAR SEM DRAMAS ENTRE IMAGENS GIF E JPG . A DE BAIXA PODE SER GIF E A DE ALTA JPG , OU VICE-VERSA . O BROWSER SE VIRA .





SE EM UM ARQUIVO NO SEU DISCO RÍGIDO TODO ESSE TRABALHO NÃO PARECE FAZER SENTIDO , LEMBRE-SE DE QUE MESMO A IMAGEM DE BAIXA RESOLUÇÃO LEVA QUASE UM SEGUNDO PARA SER TRANSFERIDO DO SERVIÇO WWW PARA SUA MÁQUINA. A IMAGEM DE ALTA RESOLUÇÃO TEM MAIS DE 10 VEZES ESSE TAMANHO .

PÁGINA DEMONSTRANDO A IMAGEM DE BAIXA RESOLUÇÃO , EM SUA CONTA PORÉM RELEVANTE EXISTÊNCIA .

PRATIQUE NO MICRO

FAÇA EXPERIÊNCIAS COM VÁRIOS TAMANHOS DE IMAGENS DE BAIXA RESOLUÇÃO , INCLUSIVE COLORIDAS .

ALGUNS BROWSERS NÃO SUPORTAM O ELEMENTO LOWSRC . ELES SIMPLESMENTE O IGNORARÃO E VÃO EXIBIR A IMAGEM NORMAL , NA TAG TRADICIONAL < IMG SRC > , MENOS MALE .

LIÇÃO 8 - MESCLANDO TEXTO & IMAGEM

CONCEITO

DE QUE SERVIRIAM AS IMAGENS , SE NÃO FOSSE O TEXTO ? AMBOS PRECISAM SE UNIR , MESCLAR-SE DE FORMA A PRODUZIR UM LAYOUT AGRADÁVEL E FUNCIONAL , SENÃO UMA HOME PAGE PERDE SUA RAZÃO DE SER .





O HTML , PERMITE UMA RAZOÁVEL LIBERDADE NESSE CAMPO . O ELEMENTO ALIGN É O RESPONSÁVEL PELA MAIOR PARTE DAS POSSIBILIDADES DE ALINHAMENTO TEXTO/IMAGEM . A FORMA BÁSICA DO ELEMENTO É :

< IMG SRC="ARQUIVO.EXT" ALIGN="ALINHAMENTO" > SEGUIDO DO TEXTO

EXEMPLO

PARA TRABALHARMOS COM AS DIVERSAS MODALIDADES DE ALINHAMENTO , VAMOS UTILIZAR UM DOCUMENTO HTML COM UM TEXTO EXTRAÍDO SEMI-ALEATORIAMENTE DA INTERNET . USE QUALQUER TEXTO QUE ESTEJA À MÃO , COPIE-O DO HELP DO WINDOWS , SE FOR O CASO . O CONTEÚDO , NESTA SITUAÇÃO , NÃO IMPORTA .

A PÁGINA , COM O TEXTO , SEM O ELEMENTO ALIGN , FICA ASSIM , EM SEU CÓDIGO-FONTE :

< HTML >

< HEAD >

< TITLE > MAIS IMAGENS < / TITLE >

< / HEAD >

< BODY >

< IMG SRC="ALTA.GIF" WIDTH=250 HEIGHT=232 >

ABSTRACT < BR >

WE REPORT THE OBSERVATION OF WARM NUCLEAR FUSION OF DEUTERON PAIRS

CATALYZED BY A CONCENTRATED COLICIDAL SUSPENSION OF AVIAN LIPIDS . WE

PRESENT A SIMPLE THEORETICAL MODEL RELATING THIS PROCESS TO SUPERSTRING

THEORY, QUANTUM WORMHOLES , FRACTAL GEOMETRY , AND HIGH TEMPERATURE

SUPERCONDUCTORS . A STRAIGHTFORWARD SCALING ARGUMENT SHOWS THAT THE

TOTAL ANNUAL ENERGY REQUIREMENTS OF THE UNITED STATES CAN BE PRODUCED

FROM APPROXIMATELY 137.03602 G OF CATALYST . < BR >

1. INTRODUCTION < BR >

RECENT OBSERVATIONS OF COLD NUCLEAR FUSION OF DEUTERON PAIRS , THROUGH

ELECTROLYSIS IN SOLUTION OF METALLIC SALTS , HAS GENERATED CONSIDERABLE

EXCITEMENT IN THE PHYSYCS COMUNITY AND EISEWHERE. THE FUSION CATALYSIS





PROCESS DESCRIBED BY FLEISCHMANN AND PONS DOES , HOWEVER , HAVE SEVERAL

DRAWBACKS WHEN CONSIDERED AS A PUTIVE MEANS OF MASS POWER GENERATION .

THE PROCESS IS SLOW , REQUIRING A CONTINUOUS ELECTRICAL POWER INPUT OF SEVERAL

HOURS BEFORE THE ONSET OF FUSION , IN ADDITION , THIS PROCESS REQUIRES

COSTLY PALLADIUM OR TITANIUM CATHODES , AS WELL AS HIGHLY TOXIC COMBINATIONS

OF DISSOLVED METALLICSALTS . < BR >

THE MODIFIED "WARM" FUSION PROCESS WHICH WE HAVE DISCOVERED ( INDEPENDENTLY )

AND WHICH IS DESCRIBED IN THIS PAPER SUFFERS NONE OF THESE DISADVANTAGES .

IN OUR PROCESS , THE THE SALT SOLUTION IS AUGMENTED BY A CONCENTRATED COLLOIDAL

SUSPENSION OF CERTAIN AVIAN LIPID COMPOUDS , AVAILABLE IN AN INEXPENSIVE

COMERCIAL PREPARATION ( I.E. , CAMPBELL'S CHICKEN NOODLE SOUP ) IN ARBITRARILY

LARGE QUANTITIES . THIS PREPARATION IS NOT ONLY NONTOXIC , BUT ACTUALLY

HEALTHFUL , INSTEAD OF REQUIRING SEVERAL HOURS OF APPLIED EXTERNAL CURRENT .

OUR PROCESS INDUCES FUSION AFTER GENTLE HEATING TO 90 DEGREES CELSIUS MAINTAINED

FOR FIVE MINUTES. THE PALLADIUM CATHODE IS REPLACED BY AN INEXPENSIVE

CHROMIUM-PLATED UTENSIL, WHITCH IS GIVEN AN APPROXIMATELY CIRCULAR MOTION

INDUCED BY ELEMENTARY MECHANUCAL MEANS .

< / BODY >

< / HTML >

E FORMATADA PELO BROWSER , RESULTA EM :





PÁGINA ANTERIOR, FORMATADA PELO NETSCAPE .

TODAS AS MODIFICAÇÕES SERÃO FEITAS NA LINHA :

< IMG SRC="ALTA.GIF" WIDTH=250 HEIGHT=232 >

PORTANTO , SOMENTE ELA SERÁ EXIBIDA, QUANDO NECESSÁRIO .

COMO NÃO HÁ TAG DE ALINHAMENTO , O BROWSER ALINHA A BASE DA IMAGEM COM A BASE DA PRIMEIRA LINHA DE TEXTO . EXPERIMENTE RETIRAR A TAG < BR > AO LADO DA PALAVRA ABSTRACT , E VER O QUE ACONTECE .

VAMOS AGORA ALTERAR A LINHA PARA :

< IMG SRC="ALTA.GIF" WIDTH=250 HEIGHT=232 ALIGN="LEFT" >

O RESULTADO É QUE A IMAGEM AGORA FICA ALINHADA PELA ESQUERDA , E O TEXTO CORRE À DIREITA , CONFORME A FIGURA ABAIXO :

IMAGEM ALINHADA À ESQUERDA , COM TEXTO CORRENDO AO LADO .





PRATIQUE NO MICRO

EXPERIMENTE ALTERAR A PÁGINA ANTERIOR , PARA QUE O TEXTO SEJA ALINHADO PELA DIREITA , E NÃO PELA ESQUERDA . DEPOIS , ALINHE MA IMAGEM PELA DIREITA , COM O TEXTO À ESQUERDA . EXPLORE AS POSSIBILIDADES .

EXISTEM OUTROS VALORES PARA O ALINHAMENTO , ALÉM DE LEFT E RIGHT . EM SUA MAIORIA , REFLETEM A POSIÇÃO DA IMAGEM EM RELAÇÃO À PRIMEIRA LINHA DO TEXTO E NÃO SÃO TÃO FLEXÍVEIS QUANTO OS DOIS PRIMEIROS . SÃO ELES : TOP , LEFT , RIGHT , TEXTTOP , MIDDLE , ABSMIDDLE , BASELINE , BOTTOM E ABSBOTTOM .

EXPERIMENTE USÁ-LOS .

LIÇÃO 9 - ESPACAMENTO TEXTO E IMAGEM

CONCEITO

DESDE OS TEMPOS DO VENTURA PUBLISHER , SABE-SE QUE COLAR TEXTO E IMAGEM É UM CAMINHO RÁPIDO PARA UM LAYOUT MAL-AJAMBRADO E , EM ÚLTIMA ANÁLISE , DESAGRADÁVEL DE SE OLHAR . EM HTML , TEMOS DOIS ELEMENTOS MUITO ÚTEIS : HSPACE E VSPACE . ELES DEFINEM O ESPAÇO , EM PIXELS , ENTRE A BORDA DE UMA IMAGEM E O TEXTO QUE PORVENTURA A CIRCUNDE . A SINTAXE É SIMPLES :

HSPACE=N

VSPACE=N

ONDE N É UM VALOR EM PIXELS

EXEMPLO

TOMEMOS A 2A. FIGURA DA LIÇÃO ANTERIOR , AGORA , EDITE A LINHA ONDE É DEFINIDA A IMAGEM E MUDE-A PARA :

< IMG SRC="ALTA.GIF" WIDTH=250 HEIGHT=232 ALIGN="LEFT" HSPACE=60 VSPACE=20 >

O RESULTADO SERÁ UMA PÁGINA SEMELHANTE A ESTA :





PÁGINA COM OS ELEMENTOS DE ESPAÇAMENTO ATIVOS

PRATIQUE NO MICRO

TENTE ALTERAR SOMENTE O VALORS VSPACE DE UMA IMAGEM , PARA GERAR UMA ESPÉCIE DE " MARGEM " EM SUA PÁGINA . UM EFEITO REALMENTE BONITO É UMA LOGOMARCA OCUPANDO O CANTO ESQUERDO DE UMA PÁGINA , UM BELO ESPAÇO SOB ELE E OS OUTROS DADOS DA PÁGINA FLUINDO AO LADO DIREITO . TENTE ISSO .

LIÇÃO 10 - USANDO UMA IMAGEM COMO FUNDO DA PÁGINA

CONCEITO

ESTE É UM RECURSO DUVIDOSO , POIS SE MAL USADO JOGARÁ POR TERRA TODO O SEU ESFORÇO NO RESTO DA PÁGINA . ESCOLHA COM MUITO CUIDADO SEUS FUNDOS . SERÃO AS IMAGENS MAIS VISTAS DE TODO O SEU SITE. SE POSSÍVEL , OPTE PELOS MUITO CLAROS OU MUITO ESCUROS . OS INTERMEDIÁRIOS NÃO CONSEGUEM UMA BOA RELAÇÃO DE CONTRASTE COM O TEXTO . E NADA PIOR QUE UMA PÁGINA ILEGÍVEL. COM TANTAS PÁGINAS LINDAS , ÚTEIS E FÁCEIS DE LER , É QUERER DEMAIS QUE O USUÁRIO SE ESFORCE PARA ULTRAPASSAR AS LIMITAÇÕES QUE NÓS MESMOS IMPUSEMOS .





PARA ATRIBUIRMOS UMA IMAGEM AO FUNDO DE UMA PÁGINA , USAMOS O ELEMENTO :

< BODY BACKGROUND="ARQUIVO.EXT" >

O ARQUIVO DE IMAGEM PODE SER GIF OU JPG . É TAMBÉM UMA BOA POLÍTICA ACRESCENTAR A TAG BGCOLOR PARA DEFINIR A COR DO FUNDO DO DOCUMENTO , CASO ALGO DE SINISTRO OCORRA COM O ARQUIVO A SER USADO NO BACKGROUND .

EXEMPLO

VAMOS USAR NOSSA AMIGUINHA , E CRIAR UMA PÁGINA APENAS COM ELA DE FUNDO :

< HTML >

< HEAD > < TITLE > EXEMPLOS DE IMAGEM < / TITLE >

< / HEAD>

< BODY BACKGROUND="ALTA.GIF" BGCOLOR=WHITE >

< / BODY >

< / HTML >

PÁGINA COM UM ARQUIVO GIF DE FUNDO





NO CASO DO NOSSO EXEMLO , AS BORDAS DA IMAGEM CONSEGUIRAMM CRIAR UM EFEITO DE JUNÇÃO IMPECEPTÍVEL. EM MUITOS CASOS ISSO NÃO ACONTECE E SEU FUNDO FICARÁ COM UM EFEITO DE " LADRILHO MAL COLOCADO " , ALGUNS SOFTW3ARES , COMO O PHOTOSHOP EO KAY POWER TOOLS 2.0 , APRESENTAM FERRAMENTAS PARA CRIAR IMAGENS COM JUNÇÕES IMPERCEPTÍVEIS . SE VOCÊ DESEJA MESMO SE TORNAR UM PROFISSIONAL EM HTML , ESTUDE-OS .

PRATIQUE NO MICRO

PROCURE EM SEUS ALFARRÁBIOS DIVERSOS EXEMPLOS DE IMAGENS , CANDIDATAS A FUNDO DE HOME PAGE . EXPERIMENTE-AS E GUARDE AS PROMISSORAS .





LIÇÃO 1 - LINKS EXTERNOS

CONCEITO

UM LINK EXTERNO NADA MAIS É QUE UMA PARTE DE SUA HOME PAGE QUE , QUANDO CLICADA , INSTRUI O BROWSER PARA CARREGAR UM DOCUMENTO HTML , NORMALMENTE EM OUTRO SERVIDOR . A PRINCIPAL INFORMAÇÃO DE QUE VOCÊ PRECISA É A URL DO LINK . APÓS ISSO , BASTA USAR A TAG

< A HREF="URL" > TEXTO DO LINK < / A >

EXEMPLO

VAMOS CRIAR UMA PÁGINA COM UM TÍTULO E UM ÚNICO LINK , PARA A PÁGINA DA NETSCAPE COMUNICATIONS . JÁ SABEMOS QUE A URL PARA O SITE EM QUESTÃO É HTTP:WWW.NETSCAPE.COM . A PÁGINA EM QUESTÃO FICA ASSIM :

< HTML >

< HEAD > < TITLE > EXEMPLOS DE LINKS EXTERNOS < / TITLE >

< / HEAD >

< BODY BGCOLOR=WHITE >

< CENTER >

< H2 > MEUS LINKS < / H2 >

< BR > < BR >

< A HREF="HTTP://WWW.NETSCAPE.COM" > PÁGINA DA NETSCAPE < / A >

< / CENTER >

< / BODY >

< / HTML >

A PÁGINA RESULTANTE É :

PÁGINA COM UM LINK PARA A NETSCAPE . TESTE-O , COM SUA CONEXÃO INTERNET ATIVA .





PRATIQUE MO MICRO

FAÇA UMA LISTA DE SEUS SITES PREFERIDOS E CONSTRUA A SUA PRÓPRIA PÁGINA DE LINKS .

LIÇÃO 2 - USANDO UMA IMAGEM PARA ACIONAR UM LINK

CONCEITO

MUITAS VEZES VEMOS UM BOTÃO OU UMA FOTO QUE QUANDO CLICADAS LEVAM A UM OUTRO SITE. ISSO NÃO É PROBLEMA PARA O HTML ; BASTA , NO ESPAÇO RELATIVO AO " TEXTO DO LINK " , NA TAG < A REF > , COLOCAR A TAG DE IMAGEM , < IMG SRC > .

EXEMPLO

VAMOS FAZER ALGO INSÓLIDO : USAREMOS A IMAGEM DA NOSSA AMIGUINHA DA UNIDADE ANTERIOR PARA ACIONAR UM LINK PARA A MINHA PÁGINA PESSOAL .

MINHA URL É HTTP://POBOX.COM/~CARDOSO . A IMAGEM UTILIZADA SERÁ ALTA.GIFF . A LISTAGEM FICARÁ ASSIM :

< HTML >

< HEAD > < TITLE > EXEMPLOS DE LINKS EXTERNOS < / TITLE >

< / HEAD >

< BODY BGCOLOR=WHITE >

< CENTER >

< H2 > MEUS LINKS < / H2 >

< BR > < BR >

< A HREF="HTTP://POBOX.COM/~CARDOSO/" > < IMG SRC="ALTA.GIF" > < / A >

< / CENTER >

< / BODY >

< / HTML >

E A IMAGEM :





IMAGEM ACIONANDO UM LINK EXTERNO .

POR DEFAULT , OS BROWSERS COLOCAM UMA BORDA EM TORNO DAS IMAGENS QUE SE COMPORTAM COMO LINKS . ISSO NÃO É UMA BOA POLÍTICA , POIS SE UM BOTÃO PRECISA DE UMA BORDA AZULADA PARA QUE O USUÁRIO PERCEBA QUE ELE É UM BOTÃO , ALGO ESTÁ MUITO ERRADO .

VOCÊ PODE ( E DEVE ) ABOLIR ESSA MOLDURA ZUL , ACRESCENTADO O ELEMENTO BORDER=0 NA TAG < IMG SRC > .

PRATIQUE NO MICRO

REESCREVA SUA LISTA DE LINKS , USANDO PEQUENOS GIFS PARA ACIONÁ-LOS .

LIÇÃO 3 - CRIANDO UM LINK PARA E-MAIL

CONCEITO

É ESSENCIAL QUE VOCÊ ESPALHE SEU E-MAIL EM TODA PÁGINA . NÃO É O BASTANTE QUE ELE ESTEJA IMPRESSO . DEVE SER UM LINK ATIVO , LEVANDO O USUÁRIO , EM UM CLIQUE , PARA UM PROGRAMA ONDE ELE COMPORÁ E ENVIARÁ A MENSAGEM .

COMO VIMOS LÁ NO COMEÇO , O E-MAIL PODE SER TRATADO COMO MAIS UMA URL . ASSIM , SE VOCÊ QUISER DISPONIBILIZAR AO USUÁRIO O ENVIO DE E-MAIL PARA , DIGAMOS , O MEU ENDEREÇO OU O DA AXCEL BOOKS , BASTA UTILIZAR A TAG DE LINKS NORMAL , MAS COM A URL MAILTO : < ENDEREÇO > .





EXEMPLO

UMA PEQUENA PÁGINA , COM UM LINK PARA MEU E-MAIL E OUTRO PARA O AXCEL BOOKS :

< HTML >

< HEAD > < TITLE > EXEMPLOS DE LINKKS EXTERNOS < / TITLE >

< / HEAD >

< BODY BGCOLOR=WHITE >

< CENTER >

< H2 > ENVIAR MENSAGEM < / H2 >

< BR > < BR >

< A HREF="MAILTO:CARDOSO@POBOX.COM" > ENVIE E-MAIL PARA CARLOS CARDOSO , EM CARDOSO@POBOX.COM < / A >

< BR > < BR >

< A HREF="MAILTO:AXCELL@EMBRATEL.NET.BR" > ENVIE E-MAIL PARA A AXCEL BOOKS , EM ACELL@EMBRATEL.NET.BR < / A >

< / CENTER >

< / BODY >

< / HTML >

NO NETSCAPE , ESSA PÁGINA FICA ASSIM :

PÁGINA VISUALIZADA NO NETSCAPE , COM OS LINKS EM AZUL .





PRATIQUE NO MICRO

APÓS DIGITAR A PÁGINA ANTERIOR , TESTE-A , COM SUA CONEXÃO INTERNET ATIVA . MANDE-ME UM E-MAIL , COM SEUS COMENTÁRIOS . MAS VIA ESSA PÁGINA QUE ACABAMOS DE CRIAR .

LIÇÃO 4 - BRINCANDO DE HACKERS

CONCEITO

EXISTEM ALGUNS TRUQUES BEM SIMPLES , QUE PODEM ASSUSTAR ATÉ USUÁRIOS EXPERIENTES . IMAGINE A SEGUINTE PÁGINA :

PÁGINA COM CAPACIDADES APARENTEMENTE EXCESSIVAS .

AGORA, IMAGINE QUE ELA REALMENTE FUNCIONA E EXIBE O CONFIG E O AUTOEXEC DO USUÁRIO , MESMO ATRAVÉS DA INTERNET . BEM , NÃO HÁ NENHUMA VIOLAÇÃO DE SEGURANÇA NESSE CASO , MAS O TRUQUEZINHO FUNCIONA .

EXEMPLO

A LISTAGEM DA PÁGINA MISTERIOSA É :

< HTML >

< HEAD > < TITLE > EXEMPLOS DE AESLP < / TITLE >

< / HEAD >

< BODY BGCOLOR=WHITE >

< CENTER >

< H2 > SEU SISTEMA < / H2 >





< BR > < BR >

< A HREF="FILE:///C:/AUTOEXEC.BAT" > CLIQUE AQU I, VOU EXIBIR SEU

< STRONG > AUTOEXEC.BAT < / STRONG > : < / A >

< BR > < BR > < BR >

< A HREF="FILE:///C:/CONFIG.SYS" > CLIQUE AQUI PARA VER SEU

< STRONG > CONFIG.SYS < / STRONG > : < / A >

< / CENTER >

< / BODY >

< / HTML >

PRATIQUE NO MICRO

VEJA COMO FOI FEITO O TRUQUE , UTILIZANDO A URL FILE:. REPARE QUE NADA , EM MOMENTO ALGUM , É TRANSFERIDO DO COMPUTADOR DO USUÁRIO .

COLOQUE ESSE TRUQUE EM SUA PÁGINA PESSOAL , PARA ASSUSTAR SEUS AMIGOS .

O QUE QUER DIZER O AESLP ? " ASSIM É SE LHE PARECER " , UMA VELHA PEÇA DE TEXTO . FICA A LIÇÃO DE QUE SITUAÇÕES POTENCIALMENTE ASSUSTADORAS ÀS VEZES NADA MAIS SÃO QUE BELAS PEÇAS PREGADAS POR GENTE BEM INTENCIONADA .

LIÇÃO 5 - LINKS EXTERNOS

CONCEITO

MUITAS PÁGINAS APRESENTAM ÍNDICES INTERNOS . CLICA-SE EM UMA LISTA DE LINKS , E VAI-SE PARA POSIÇÕES DIFERENTES DENTRO DO MESMO DOCUMENTO .

ISSO É ESSENCIALMENTE ÚTIL QUANDO QUEREMOS CRIAR UM GLOSSÁRIO , POR EXEMPLO . ESSA , ALIÁS , É A ESSÊNCIA DO HIPERTEXTO .

PARA QUE NOSSO LINK INTERNO SAIBA PARA ONDE IR , TEMOS QUE TER UM ALVO .

DEFINIMOS UM ALVO COM A TAG :

< A NAME="NOME DO ALVO" > ALVO < / A >

ENTRE A TAG < A NAME > E A TAG < / A > DEVE ENTRAR TODO O CONTEÚDO DA PARTE DA PÁGINA À QUAL ELA SE REFERE , NÃO IMPORTA O TAMANHO . O NOME DO ALVO PODE SER QUALQUER COISA , DENTRO DO BOM-SENSO . BATIZE UM ALVO COMO " GUESTBOOK " , É NÃO COMO " ÁREA DE ENTRADA DE DADOS PARA MEU GUESTBOOK PESSOAL-1 " .





TENDO DEFINIDO O ALVO , PODEMOS CRIAR OS LINKS. UM LINK PARA UM ALVO DENTRO DO MESMO DOCUMENTO HTML , DIFERENCIA-SE DO LINK EXTERNO POR UM PEQUENO DETALHE: O SINAL "#" . ESTE SINAL INDICA AO BROWSER QUE AQUELA PARTE DA URL É UM SUBCONJUNTO DA PÁGINA PRINCIPAL . A SINTAXE DA TAG DE LINK INTERNO , ENTÃO, É ASSIM :

< A HREF="#ALVO" > CLIQUE AQUI PARA O ALVO < / A >

O TEXTO EM "#ALVO" DEVE SER IDÊNTICO AO TEXTO EM "NOME DO ALVO" , NA TAG < A NAME > . FEITO ISSO , O USO É FACILIMO . OS ALVOS PODEM ESTAR EM QUALQUER POSIÇÃO NA PÁGINA , ANTES OU DEPOIS DO LINK , NÃO IMPORTA .

EXEMPLO

VAMOS VER UMA PÁGINA COMO A SEGUINTE :

PÁGINA COM LINKS INTERNOS .

ESTA PÁGINA LISTA QUATRO LINKS INTERNOS , QUE LEVAM PARA O E-MAIL DO SUJEITO SELECIONADO . REPARE, NO CÓDIGO-FONTE , NA QUANTIDADE ABSURDA DE QUEBRAS DE LINHA , < BR > , UTILIZADAS PARA MANTER OS QUATRO ALVOS SEPARADOS ENTRE SI. ESSA PÁGINA SÓ GERA O EFEITO VISUAL DESEJADO SE HOUVER UM BOM ESPAÇAMENTO ENTRE AS ÁREAS .

< HTML >

< HEAD > < TITLE > EXEMPLOS DE LINK INTERNO < / TITLE >

< / HEAD >

< BODY BGCOLOR=WHITE >

< CENTER >





< H2 > SELECIONE O E-MAIL< / H2 >

< BR > < BR >

< A HREF="#CARDOSO" > CARLOS CARDOSO < / A >

< A HREF="#AXCEL" > AXCELL BOOKS < / A >

< A HREF="#GATES" > BILL GATES < / A >

< A HREF="#CLINTON" > BILL CLINTON < / A >

< / CENTER >

< BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR >

< A NAME="CARDOSO" >

O E-MAIL DE CARLOS CARDOSO < BR >

É: < B > CARDOSO@POBOX.COM < / B >

< BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR >

< / A >

< A NAME="AXCEL" >

O E-MAIL DA AXCEL BOOKS < BR >

É : < B > AXCELL@EMBRATEL.NET.BR < / B >

< BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR >

< / A >

< A NAME="GATES" >

O E-MAIL DE BILL GATES < BR >

É : < B > BILLG@MICROSOFT.COM < / B >

< BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR > < BR >

< / A >

< A NAME="CLINTON" >

O E-MAIL DE BILL CLINTON < BR >

É : < B > PRESIDENT@WHITEHOUSE.GOV < / B >

< / A >

< / BODY >

< / HTML >

PRATIQUE NO MICRO

PENSE EM UMA PÁGINA SOBRE UM ASSUNTO DE SEU INTERESSE E DIVIDA-A EM DIVERSOS ALVOS. CRIE UM ALVO DA PÁGINA , LOGO APÓS A TAG < BODY > E , AO PÉ DE CADA ALVO INTERNO , COLOQUE UM LINK PARA " VOLTAR AO TOPO " , SIMPLESMENTE CHAMANDO O ALVO DO INÍCIO DA PÁGINA .





UNIDADE VI

CORES

NESTA UNIDADE , VEREMOS COMO ACRESCENTAR COR AS SUAS PÁGINAS COM HTML 3.2 , FAZENDO USO DAS PLACAS GRÁFICAS MAIS MODERNAS DO MERCADO , ABANDONANDO DE VEZ O TRADICIONAL TEXTO PRETO SOBRE FUNDO CINZA QUE POR ANOS FOIA A MARCA REGISTRADA DA WORLD WIDE WEB .





LIÇÃO 1 - ESCOLHENDO A COR

CONCEITO

VERDE SÓ COMBINA COM AMARELO NA BANDEIRA DO BRASIL , PRETO E AZUL-MARINHO É UM CONVITE AO USUÁRIO PARA ABANDONAR A PÁGINA. USE O EXEMPLO DA MÍDIA IMPRESSA PARA GUIAR SUA ESCOLHA DE CORES . O QUE NÃO FICA BEM IMPRESSO , DIFICILMENTE FICA BEM NO VÍDEO .

EXEMPLO

AMARELO É UMA COR MUITO BONITA IMPRESSA , MAS UM TEXTO EM AMARELO TORNA-SE DOLOROSO DE SE LER , EM UMA HOME PAGE .

PRATIQUE NO MICRO

PROCURE EXEMPLOS NA INTERNET DE BONS EXEMPLOS DE USO DE CORES . OS EXEMPLOS RUINS SÃO TANTOS QUE VOCÊ NÃO PRECISA PROCURAR .

LIÇÃO 2 - COMO O COMPUTADOR LIDA COM CORES

CONCEITO

AS CORES EMITIDAS POR SER MONITOR DE VÍDEO OU SUA TELEVISÃO , SÃO PRODUZIDAS ATRAVÉS DO PROCESSO DE COMBINAÇÃO DE 3 CORES BÁSICAS VERMELHO , VERDE E AZUL. USA-SE , UNIVERSALMENTE , A SIGLA RGB , DE RED , GREEN E BLUE , EM INGLÊS .

CADA PONTO NA TELA , CHAMADO PIXEL , EMITE UMA COR RESULTANTE DA COMBINAÇÃO DOS VALORES R ,G E B . HOJE EM DIA , É COMUM ENCONTRARMOS PLACAS DE VÍDEO QUE TRABALHAM COM "24 BITS" DE COR , O QUE EQUIVALE A UM BYTE POR COR , TRÊS BYTES POR PIXEL . ASSIM , OS ELEMENTOS RGB PODEM ASSUMIR QUALQUER VALOR ENTRE 0 E 255 .





EXEMPLO

UM PONTO VERMELHO , EM RGB , TERIA OS VALORES :

R=255

G=0

B=0

COM 256 POSSIBILIDADES PARA CADA COR BÁSICA , TEMOS UM POTENCIAL DE EXATAMENTE 16.777.216 CORES DISPONÍVEIS . DÁ PRA BRINCAR .

PRATIQUE NO MICRO

PESQUISE NO MANUAL DE SUA PLACA DE VÍDEO QUAL O MAIOR NÚMERO DE CORES QUE ELA PERMITE . TENTE EQUILIBRAR PERFORMANCE COM QUALIDADE DE COR . ACHE A MELHOR CONFIGURAÇÃO , EM RELAÇÃO À SUA MÁQUINA .

LIÇÃO 3 - A MÁ NOTÍCIA

CONCEITO

O HTML , SÓ ACEITA ENTRADA DE VALORES RGB EM HEXADECIMAL . ASSIM , NÃO PODEMOS UTILIZAR A INFORMAÇÃO PRONTA , EM DIVERSOS EDITORES GRÁFICOS . TEMOS QUE USAR MÉTODOS ALTERNATIVOS PARA CHEGARMOS À COR DESEJADA .

UM EXCELENTE MÉTODO É UTILIZAR O SOFTWARE HOTDOG PRO , DA SAUSAGE SOFTWARE . ELE DISPÕE DE UM MÉTODO PARA DEFINIÇÃO DE CORES QUE AUTOMATIZA GRANDE PARTE DO PROCESSO . COM TRÊS CONTROLES DESLIZANTES , VÊ-SE AS CORES SENDO MODIFICADAS , À MEDIDA QUE ALTERAMOS OS VALORES . AO FINAL , TEMOS OS VALORES EM HEXADECIMAL DA COR ESCOLHIDA , E A ALTERAÇÃO É REFLETIDA NA TAG MODIFICADA .

EXEMPLO

VEJA O EDITOR DE CORES DO HOTDOG EM AÇÃO :





EDITOR DE CORES DO HOTDOG PRO

O HOTDOG PRO PODE SER ENCONTRADO NA HOME-PAGE DA SAUSAGE SOFTWARE , EM HTTP://WWW.SAUSAGE.COM .

PRATIQUE NO MICRO

ESCOLHA AS CORES DE SUA PÁGINA ; PESQUISE , COM O AUXÍLIO DE UM EDITOR GRÁFICO , QUAIS AS MELHORES COMBINAÇÕES PARA SEU PROJETO . ANOTE OS VALORES RGB DE CADA UMA .

LIÇÃO 4 - A BOA NOTÍCIA

CONCEITO

PODEMOS USAR A CALCULADORA DO WINDOWS PARA CONVERTER FACILMENTE VALORES DE DECIMAL PARA HEXADECIMAL E VICE-VERSA .

EXEMPLO

USAR A CALCULADORA DO WINDOWS PARA CONVERTER VALORES É MUITO SIMPLES :

1. CHAME A CALCULADORA DO WINDOWS ;

2. DIGITE O VALOR EM DECIMAL ;

3. CLIQUE NO BOTÃO HEX ;

4. ANOTE O VALOR, AGORA EM HEXADECIMAL ;

5. CLIQUE NO BOTÃO DEC, DEPOIS NO BOTÃO CE ;

6. REPITA O PROCESSO PARA OS VALORES G E B .





CALCULADORA DO WINDOWS , UTILÍSSIMA PARA CONVERTER DECIMAIS EM HEXADECIMAIS .

PRATIQUE NO MICRO

ESCOLHA CORES DIRETO DE UM EDITOR GRÁFICO , COMO O PAINT SHOP PRO ; ANOTE ESSES VALORES E CONVERTA-OS PARA HEXADECIMAL COM A CALCULADORA DO WINDOWS .

CAMPO DESCREVENDO OS VALORES DECIMAIS DOS ELEMENTOS R , G E B .

PAINT SHO PRO

LIÇÃO 5 - MODIFICANDO A COR DO FUNDO DE SUA PÁGINA

CONCEITO

AQUELE CINZA-PADRÃO VISTO NAS PÁGINAS MAIS ANTIGAS ESTÁ MAIS QUE ULTRAPASSADO . SUA PÁGINA PODE TER A COR DE FUNDO QUE VOCÊ QUISER , BASTANDO QUE VOCÊ INCLUA O ELEMENTO :





BGCOLOR="#RRGGBB"

DENTRO DA TAG < BODY > DE SEU DOCUMENTO HTML .

LEMBRE-SE QUE OS VALORES RR , GG E BB, RELATIVOS AO RGB , DEVEM SER SEMPRE EM HEXADECIMAL .

EXEMPLO

VEJAMOS UMA PÁGINA COM FUNDO BRANCO , UTILIZANDO O ELEMENTO BGCOLOR :

< HTML >

< HEAD > < TITLE > EXEMPLO DE FUNDO < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< BR > < BR >

< CENTER >

< H2 >

ESTA PÁGINA ESTÁ COM FUNDO BRANCO

< / H2 >

< / CENTER >

< / BODY >

< / HTML >

AO SER EXIBIDA NO BROWSER , O RESULTADO É :

EXEMPLO DE PÁGINA COM FUNDO BRANCO . REPARE NO IDENTIFICADOR # E NAS ASPAS , ENCERRANDO OS VALORES DO ELEMENTO BGCOLOR .





PRATIQUE NO MICRO

EXPERIMENTE A PÁGINA ANTERIOR , ALTERANDO ALEATORIAMENTE OS VALORES RGB , A FIM DE DESCOBRIR CORES INTERESSANTES . ANOTE SEMPRE AS QUE MAIS AGRADECEM .

LIÇÃO 6 - MODIFICANDO A COR DOS LINKS

CONCEITO

OS LINKS SÃO DIFERENCIADOS DO TEXTO NORMAL POR DOIS FATORES : SÃO SUBLINHADOS E ESTÃO EM UMA COR DIFERENTE DO RESTO DO TEXTO . AO ALTERAR A COR DE UM LINK , LEMBRE-SE SEMPRE DE FAZÊ-LA DIFERENTE DO CORPO PRINCIPAL DA PÁGINA , CASO CONTRÁRIO O USUÁRIO DEPENDERÁ EXCLUSIVAMENTE DO SUBLINHADO PARA RECONHECER OS LINKS. E ISSO PODE SER DESATIVADO NA CONFIGURAÇÃO DE ALGUNS BROWSERS .

O ELEMENTO MODIFICADOR DA COR DO LINK OBEDECE A CARACTERÍSTICAS .

O ELEMENTO PARA MODIFICAR A COR DE UM LINK É :

LINK="#RRGGBB"

EXEMPLO

UMA PÁGINA COM O MODIFICADOR DE COR DOS LINKS , ALTERANDO DO AZUL DEFAULT PARA VERMELHO PURO :

< HTML >

< HEAD > < TITLE > EXEMPLO DE LINK < / TITLE >

< / HEAD >

< BODY LINK="#FF0000" >

< BR > < BR >

< CENTER >

< H2 >

< A HREF="HTTP://WWW.NETSCAPE.COM" > ESTE LINK PARA A NETSCAPE TEVE SUA COR ALTERADA PARA VERMELHO < / A >

< / H2 >

< / CENTER >

< / BODY >

< / HTML >





PRATIQUE NO MICRO

USANDO O QUE VOCÊ JÁ SABE , MODIFIQUE A PÁGINA ANTERIOR PARA QUE O LINK APRESENTADO SEJA EXIBIDO EM VERDE .

LIÇÃO 7 - MODIFICANDO A COR DO LINK JÁ VISITADO

CONCEITO

POR DEFAULT , O NETSCAPE USA UM AZUL MEIO ACINZENTADO PARA A COR DOS LINKS JÁ VISITADOS . PODEMOS TROCAR ESSA COR , COM O ELEMENTO

VLINK="RRGGBB"

INSERIDO , SEMPRE , NA TAG < BODY > DO DOCUMENTO .

ALGUNS BROWSERS PERMITEM QUE SE CONFIGURE UM PRAZO DE VALIDADE DE UM LINK . EM GERAL , APÓS 30 DIAS SEM SER SELECIONADO , O LINK É MARCADO COMO NÃO-VISITADO .

EXEMPLO

VEJAMOS UMA PÁGINA QUE SELECIONA A COR AMARELA PARA OS LINKS VISITADOS .

ABRA ESTA PÁGINA DA NETSCAPE E , APÓS A MESMA TER SIDO TOTALMENTE CARREGADA , CLIQUE NO BOTÃO BACK DE SEU BROWSER . O LINK QUE ANTES ERRA AZUL AGORA ESTÁ AMARELO .

< HTML >

< HEAD > < TITLE > EXEMPLO DE LINK VISITADO < / TITLE >

< / HEAD >

< BODY VLINK="#FFFF00" >

< BR > < BR >

< CENTER >

< H2 >

< A HREF="HTTP://WWW.NETSCAPE.COM" > ESTE LINK PARA A NETSCAPE FICARÁ AMARELO EM BREVE < / A >

< / H2 >

< / CENTER >

< / BODY >

< / HTML >





PRATIQUE NO MICRO

CRIE DIVERSAS VARIAÇÕES DE COR , TENTANDO CONSEGUIR COMBINAÇÕES COM AS QUAIS OS LINKS VISITADOS NEM DESAPARECAM , NEM GANHEM MAIS DESTAQUES QUE OS LINKS ATIVOS , NÃO-VISITADOS .

LIÇÃO 8 - MODIFICANDO A COR DO LINK ATIVADO

CONCEITO

ESTE ELEMENTO MODIFICA A COR DO LINK AO SER CLICADO , MANTENDO-SE O BOTÃO DO MOUSE PRESSIONADO , O LINK É EXIBIDO NA COR SELECIONADA . CASO CONTRÁRIO , SERÁ APENAS UMA BREVE PISCADELA . O ELEMENTO EM QUESTÃO É :

ALINK="#RRGGBB"

EXEMPLO

NA PÁGINA ABAIXO , CLIQUE NO LINK SEM SOLTAR O BOTÃO DO MOUSE. O LINK FICARÁ AMARELO .

< HTML >

< HEAD > < TITLE > EXEMPLO SE LINK ATIVADO < / TITLE >

< / HEAD >

< BODY ALINK="#FFFF00" >

< BR > < BR >

< CENTER >

< H2 >

< A HREF="HTTP://WWW.NETSCAPE.COM" > ESTE LINK PARA A NETSCAPE FICARÁ AMARELO AO SER CLICADO < / A >

< / H2 >

< / CENTER >

< / BODY >

< / HTML >

PRATIQUE NO MICRO

ESTE RECURSO APRESENTA UM RESULTADO BASTANTE FUGAZ , MAS ALGUMAS COMBINAÇÕES DE CORES PODEM ACRESCENTAR PEQUENOS FLASHES MUITO INTERESSANTES , QUANDO VISTOS EM CONJUNTO , NA PÁGINA . PESQUISE ESSAS COMBINAÇÕES , ALTERANDO A COR DO LINK E A COR DO LINK ATIVADO . UMA BOA ALTERNATIVA SERIA MODIFIAR A COR DO LINK ATIVADO PARA A MESMA COR DO FUNDO DA PÁGINA .





LIÇÃO 9 - MODIFICANDO A COR DO TEXTO

CONCEITO

NÃO SERIA JUSTO PODER TER TANTO CONTROLE SOBRE A COR DOS LINKS , SE NÃO PUDÉSSEMOS MODIFICAR A COR DO TEXTO . PARA ISSO , USAMOS O ELEMENTO

TEXT="RRGGBB"

SEMPRE DENTRO DA TAG < BODY > . ATENTE QUE ESSA MODIFICAÇÃO É GLOBAL , E A COR DEFAULT DE QUALQUER TEXTO DA PÁGINA PASSA A SER A DEFINIDA POR ESTE ELEMENTO. MODIFICAÇÕES POSTERIORES SURTIRÃO EFEITO , MAS SEMPRE DENTRO DAS RESPECTIVAS TAGS . MAIS SOBRE ISSO ADIANTE .

EXEMPLO

VAMOS A UMA PÁGINA COM UM TEXTO EM UM SUAVE MATIZ DE ZUL , COM FUNDO BRANCO , DEMONSTRANDO A COMBINAÇÃO DE MAIS DE UM ELEMENTO DENTRO DA MESMA TAG < BODY > :

< HTML >

< HEAD > < TITLE > EXEMPLO DE TEXTO < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" TEXT="#46C1E6" >

< BR > < BR >

< H3 >

SERIA MUITO INTERESSANTE TER MAIS CONTROLE SOBRE A FORMATAÇÃO , MAS < BR > MEMO EM SEU ESTÁGIO ATUAL , O HTML ESTÁ SE TORNANDO PERIGOSAMENTE < BR > COMPLEXO , CORRENDO O RISCO DE SE TORNAR PROIBITIVAMENTE ONEROSO , EM < BR > SUA CURVA DE APRENDIZADO . HOJE , GASTA-SE MAIS TEMPO PARA APRENDER < BR > HTML DO QUE SE GASTAVA PARA APRENDER BASIC NOS ANOS 80 .

< / H3 >

< / CENTER >

< / BODY >

< / HTML >

LEMBRE-SE: A TAG < BODY > PODE TER DIVERSOS ELEMENTOS MODIFICADORES DENTRO DE SI , MAS SÓ PODE HAVER UMA ÚNICA TAG < BODY > EM UM DOCUMENTO HTML .





PRATIQUE NO MICRO

MODIFICANDO A LISTAGEM ANTERIOR , PROCURO COMBINAÇÕES IMPRÓPRIAS DE COR DE FUNDO/COR DE TEXTO . PRESTE ATENÇÃO PARA NUNCA UTILIZÁ-LAS .

LIÇÃO 10 - MODIFICANDO A COR DE PARTE DO TEXTO

CONCEITO

PARA DESTACAR UMA FRASE , PALAVRA OU LETRA , PODEMOS USAR O RECURSO DE COR . COM A TAG < FONT > < / FONT > , E O MODIFICADOR COLOR="#RRGGBB" , PODEMOS ATRIBUIR UMA COR DIFERENTE DA DEFINIDA ANTERIORMENTE AOS CARACTERES QUE ESTIVEREM INSERIDOS ENTRE AS TAGS .

EXEMPLO

VAMOS VER A PÁGINA DO EXEMPLO ANTERIOR , MAS APRESENTANDO A FRASE "CORRENDO O RISCO" EM VERDE-MUSGO , E A PALAVRA "BASIC" EM VERMELHO :

< HTML >

< HEAD > < TITLE > EXEMPLO DE TEXTO < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< BR > < BR >

< CENTER >

< H3 >

SERIA MUITO INTERESSANTE TER MAIS CONTROLE SOBRE A FORMATAÇÃO , MAS < BR > MESMO EM SEU ESTÁGIO ATUAL , O HTML ESTÁ SE TORNANDO PERIGOSAMENTE < BR > COMPLEXO .

< FONT COLOR="#A3D52D" > CORRENDO O RISCO < / FONT >

DE SE TORNAR PROIBITIVAMENTE ONEROSO , EM < BR > SUA CURVA DE APRENDIZADO . HOJE , GASTA-SE MAIS TEMPO PARA APRENDER < BR > HTML DO QUE SE GASTAVA PARA APRENDER

< FONT COLOR="#FF0000" > BASIC < / FONT >

NOS ANOS 80 .

< / H3 >

< / CENTER >

< / BODY >

< / HTML >





PÁGINA GERADA PELA LISTAGEM ANTERIOR . IMAGINE QUE A FRASE " CORRENDO O RISCO " ESTÁ VERDE , E QUE "BASIC" ESTÁ EM VERMELHO , E VOCÊ TERÁ UMA BOA IDÉIA DOS RESULTADOS OBTIDOS .

OS ESPAÇOS ENTRE AS TAGS E AS QUEBRAS DE LINHA FORAM COLOCADOS APENAS PARA FINS DE VISUALIZAÇÃO . O HTML NÃO SE IMPORTA COM ESSES ESPAÇOS , E SÓ RECONHECE COMO QUEBRA DE LINHA AS TAGS < BR > E < P > .

PRATIQUE NO MICRO

CRIE UMA PÁGINA ALTERANDO A COR DE CADA LETRA DE UMA PALAVRA , E OBSERVE O EFEITO (RUIM) OBTIDO .

LIÇÃO 11 - ALTERNATIVA AOS CÓDIGOS DAS CORES

CONCEITO

UMA BOA NOTÍCIA : NÃO É OBRIGATÓRIO QUE AS CORES SEJAM DEFINIDAS EM SEUS COMPONENTES RGB . O NETSCAPE E O INTERNET EXPLORER ACEITAM QUE SEJAM USADOS OS NOMES DAS CORES . ASSIM , VOCÊ NÃO PRECISA DESCOBRIR QUAL A COMBINAÇÃO RGB PARA VERMELHO-MORANGO . VOCÊ SÓ PRECISA DESCOBRIR COMO SE DIZ "VERMELHO-MORANGO" EM INGLÊS .

A DESVANTAGEM DE PRECISAR DO NOME DAS CORES PODE SER REMEDIADA , TENDO-SE EM MÃO A SEGUINTE TABELA, QUE INCLUSIVE TRAZ OS VALORES RGB DE CADA COR .

EXEMPLO

VAMOS CRIAR UMA PÁGINA DE EXEMPLO USANDO OS NOMES DAS CORES , EM VEZ DE SEUS CÓDIGO RGB :

< HTML >

< HEAD > < TITLE > EXEMPLO DE TEXTO COLORIDO < / TITLE >

< / HEAD >

< BODY BGCOLOR="WHITE" >

< BR > < BR >

< CENTER >

< H1 >

< FONT COLOR=PINK > É < / FONT > < FONT COLOR=LINEN > H < / FONT > < FONT COLOR=ORCHID > O < / FONT > < FONT COLOR=OLDLACE > J < / FONT >

E O D < FONT COLOR=PERU > I < / FONT > < FONT COLOR="#FFFF00 > A < / FONT > ...

< / H1 >

< / CENTER >

< / BODY >

O EFEITO (ARGH) É O MESMO OBTIDO COM O USO DOS CÓDIGOS RGB , MAS DESSA FORMA FICA MAIS FÁCIL IDENTIFICAR QUEM É QUEM .

PRATIQUE NO MICRO

REFAÇA O EXERCÍCIO DA LIÇÃO ANTERIOR , TROCANDO OS VALORES HEXADECIMAIS POR VALORES LITERAIS , COM O NOME DAS CORES .

ABAIXO , UMA TABELA COM O NOME DAS CORES ACEITAS PELO NETSCAPE , E SEUS RESPECTIVOS CÓDIGOS RGB .





COLOR - RED - GREEN - BLUE

ALICEBLUE F0 F8 FF

ANTIQUEWHITE FA EB D7

AQUA 00 FF FF

AQUAMARINE 7F FF D4

AZURE F0 FF FF

BEIGE F5 F5 DC

BISQUE FF E4 C4

BLACK 00 00 00

BLANCHEDALMOND FF EB CD

BLUE 00 00 FF

BLUEVIOLET 8A 2B E2

BROWN A5 2A 2A

BURLYWOOD DE B8 87

CADETBLUE 5F 9E A0

CHARTREUSE 7F FF 00

CHOCOLATE D2 69 1E

CORAL FF 7F 50

CORNFLOWERBLUE 64 95 ED

CORNSILK FF F8 DC

CRIMSON DC 14 3C

CYAN 00 FF FF

DARKBLUE 00 00 8B

DARKCYAN 00 8B 8B

DARKGOLDENROD B8 86 0B

DARKGRAY A9 A9 A9

DARKGREEN 00 64 00

DARKKHAKI BD B7 6B

DARKMAGENTA 8B 00 8B

DARKOLIVEGREEN 55 6B 2F

DARKORANGE FF 8C 00

DARKORCHID 99 32 CC

DARKRED 8B 00 00

DARKSALMON E9 96 7A

DARKSEAGREEN 8F BC 8F

DARKSLATEBLUE 48 3D 8B

DARKSLATEGRAY 2F 4F 4F





COLOR - RED - GREEN - BLUE

DARKTURQUOISE 00 CE D1

DARKVIOLET 94 00 D3

DEEPPINK FF 14 93

DEEPSKYBLUE 00 BF FF

DIMGRAY 69 69 69

DODGERBLUE 1E 90 FF

FIREBRICK B2 22 22

FLORALWHITE FF FA F0

FORESTGREEN 22 8B 22

FUCHSIA FF 00 FF

GAINSBORO DC DC DC

GHOSTWHITE F8 F8 FF

GOLD FF D7 00

GOLDENROD DA A5 20

GRAY 80 80 80

GREEN 00 80 00

GREENYELLOW AD FF F0

HONEYDEW F0 FF F0

HOTPINK FF 69 B4

INDIANRED CD 5C 5C

INDIGO 4B 00 82

IVORY FF FF F0

KHAKI F0 E6 8C

LAVENDER E6 E6 FA

LAVENDERBLUSH FF F0 F5

LAWNGREEN 7C FC 00

LEMONCHIFFON FF FA CD

LIGHTBLUE AD D8 E6

LIGHTCORAL F0 80 80

LIGHTCYAN 00 FF FF

LIGHTGOLDENRODYELLOW FA FA D2

LIGHTGREEN 90 EE 90

LIGHTGREY D3 D3 D3

LIGHTPINK FF B6 C1

LIGHTSALMON FF A0 7A

LIGHTSEAGREEN 20 B2 AA





COLOR - RED - GREEN - BLUE

LIGHTSKYBLUE 87 CE FA

LIGHTSLATEGRAY 77 88 99

LIGHTSTEELBLUE B0 C4 DE

LIGHTYELLOW FF FF E0

LIME 00 FF 00

LIMEGREEN 32 CD 32

LINEN FA F0 E6

MAGENTA FF 00 FF

MAROON 80 00 00

MEDIUMAQUAMARINE 66 CD AA

MEDIUMBLUE 00 00 CD

MEDIUMORCHID BA 55 D3

MEDIUMPURPLE 93 70 DB

MEDIUMSEAGREEN 3C B3 71

MEDIUMSLATEBLUE 7B 68 EE

MEDIUMSPRINGGREEN 00 FA 9A

MEDIUMTURQUOISE 48 D1 CC

MEDIUMVIOLETRED C7 15 85

MIDNIGHTBLUE 19 19 70

MINTCREAM F5 FF FA

MISTYROSE FF E4 E1

MOCCASIN FF E4 B5

NAVAJOWHITE FF DE AD

NAVY 00 00 80

OLDLACE FD F5 E6

OLIVE 80 80 00

OLIVEDRAB 6B 8E 23

ORANGE FF A5 00

ORANGERED FF 45 00

ORCHID DA 70 D6

PALEGOLDENROD EE E8 AA

PALEGREEN 98 FB 98

PALETURQUOISE AF EE EE

PALEVIOLETRED DB 70 93

PAPAYAWHIP FF EF D5





COLOR - RED - GREEN - BLUE

PEACHPUFF FF DA B9

PERU CD 85 3F

PINK FF C0 CB

PLUM DD A0 DD

POWDERBLUE B0 E0 E6

PURPLE 80 00 80

RED FF 00 00

ROSYBROWN BC 8F 8F

ROYALBLUE 41 69 E1

SADDLEBROWN 8B 45 13

SALMON FA 80 72

SANDYBROWN F4 A4 60

SEAGREEN 2E 8B 57

SEASHELL FF F5 EE

SIENNA A0 52 2D

SILVER C0 C0 C0

SKYBLUE 87 CE EB

SLATEBLUE 6A 5A CD

SLATEGRAY 70 80 90

SNOW FF FA FA

SPRINGGREEN 00 FF 7F

STEELBLUE 46 82 B4

TAN D2 B4 8C

TEAL 00 80 80

THISTLE D8 BF D8

TOMATO FF 63 47

TURQUOISE 40 E0 D0

VIOLET EE 82 EE

WHEAT F5 DE B3

WHITE FF FF FF

WHITESMOKE F5 F5 F5

YELLOW FF FF 00

YELLOWGREEN 9A CD 32





UNIDADE VII

LISTAS

VAMOS APRENDER A FAZER LISTAS, QUE SÃO GRANDES FERRAMENTAS PARA ORGANIZAR INFORMAÇÕES E LINKS. VEREMOS COMO USAR ALGUNS TRUQUES INTERESSANTES, COMO ENCADEAR UMA LISTA DENTRO DA OUTRA E NUMERÁ-LAS AUTOMATICAMENTE EM DECIMAL OU MESMO EM ALGARISMOS ROMANOS .





LIÇÃO 1 - LISTAS

CONCEITO

UMA LISTA COMO SABE QUALQUER UM QUE JÁ FOI CONVIDADO A UM CASAMENTO , E UMA SEQUÊNCIA DE ITENS , NUMERADOS OU NÃO , GERALMENTE EM LINHAS SEPARADAS . EM HTML , O CONCEITO É O MESMO . O BROWSER CUIDA DA TABULAÇÃO E , ULTIMAMENTE , ATÉ DA NUMERAÇÃO DOS INTENS . ESPERA-SE NO FUTURO COMANDOS QUE ORDENEM AUTOMATICAMENTE OS ITENS .

A TAG BÁSICA PARA LISTAS É FORMADA POR UMA TAG DE ABERTURA , < UL > , UMA TAG COMPOSTA PARA O TÍTULO DA LISTA , < LH > TÍTULO < / LH > , UMA OU MAIS TAGS COM OS ELEMENTOS QUE COMPOEM A LISTA , < LI > E , FINALMENTE , A TAG DE FECHAMENTO : < UL >

EXEMPLO

A ESTRUTURA DE UMA LISTA , COMO VISTA NO CÓDIGO-FONTE , FICARIA ASSIM :

< UL >

< LH > TÍTULO DA LISTA < / LH >

< LI > ELEMENTO 1

< LI > ELEMENTO 2

< LI > ELEMENTO 3

< / UL >

PRATIQUE NO MICRO

VAMOS FORMATAR UMA LISTA SIMPLES . USAREMOS O RECURSO DA TAG < BASEFONT SIZE=N > , PARA MELHOR VISUALIZARMOS A PÁGINA AO FINAL .

< HTML >

< HEAD > < TITLE > EXEMPLO DE LISTAS < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< BASEFONT SIZE=5 >

< BR > < BR >

< UL >

< LH > LISTA PADRÃO < / LH >

< LI > ENTERPRISE

< LI > VOYAGER

< LI > INTREPID

< LI > EXCELSIOR





LIÇÃO 1 - LISTAS

< BR > < BR >

CONCEITO

< BR > < BR >

UMA LISTA COMO SABE QUALQUER UM QUE JÁ FOI CONVIDADO A UM CASAMENTO , E UMA SEQUÊNCIA DE ITENS , NUMERADOS OU NÃO , GERALMENTE EM LINHAS SEPARADAS . EM HTML , O CONCEITO É O MESMO . O BROWSER CUIDA DA TABULAÇÃO E , ULTIMAMENTE , ATÉ DA NUMERAÇÃO DOS INTENS . ESPERA-SE NO FUTURO COMANDOS QUE ORDENEM AUTOMATICAMENTE OS ITENS .

< BR > < BR >

A TAG BÁSICA PARA LISTAS É FORMADA POR UMA TAG DE ABERTURA , < UL > , UMA TAG COMPOSTA PARA O TÍTULO DA LISTA , < LH > TÍTULO < / LH > , UMA OU MAIS TAGS COM OS ELEMENTOS QUE COMPOEM A LISTA , < LI > E , FINALMENTE , A TAG DE FECHAMENTO : < UL >

< BR > < BR >

EXEMPLO

< BR > < BR >

A ESTRUTURA DE UMA LISTA , COMO VISTA NO CÓDIGO-FONTE , FICARIA ASSIM :

< BR > < BR >

< UL >

< BR > < BR >

< LH > TÍTULO DA LISTA < / LH >

< BR > < BR >

< LI > ELEMENTO 1

< BR > < BR >

< LI > ELEMENTO 2

< BR > < BR >

< LI > ELEMENTO 3

< BR > < BR >

< / UL >

< BR > < BR >

PRATIQUE NO MICRO

< BR > < BR >

VAMOS FORMATAR UMA LISTA SIMPLES . USAREMOS O RECURSO DA TAG < BASEFONT SIZE=N > , PARA MELHOR VISUALIZARMOS A PÁGINA AO FINAL .

< BR > < BR >

< HTML >

< BR > < BR >

< HEAD > < TITLE > EXEMPLO DE LISTAS < / TITLE >

< BR > < BR >

< / HEAD >

< BR > < BR >

< BODY BGCOLOR="#FFFFFF" >

< BR > < BR >

< BASEFONT SIZE=5 >

< BR > < BR >

< BR > < BR > < BR > < BR >

< UL >

< BR > < BR >

< LH > LISTA PADRÃO < / LH >

< BR > < BR >

< LI > ENTERPRISE

< BR > < BR >

< LI > VOYAGER

< BR > < BR >

< LI > INTREPID

< LI > EXCELSIOR

< BR > < BR >





< LI > RELIANT

< LI > PASTEUR

< LI > HORACIO

< LI > HOOD

< LI > TSIOLKOVSKY

< / UL >

< / BODY >

< / HTML >

COMPARE SEU RESULTADO COM A PÁGINA ABAIXO . SE HOUVER ALGUMA DIFERENÇA , TENTE DESCOBRIR O ERRO .

PÁGINA RESULTANTE .

REPARE QUE O TÍTULO DA LISTA É AUTOMATICAMENTE ALINHADO A PRIMEIRA LETRA DOS ELEMENTOS DA MESMA .

ALGUNS ELEMENTOS DA TAG DE LISTAS NÃO SÃO RECONHECIDOS PELO MICROSOFT INTERNET EXPLORER , ATÉ SUA VERSÃO 2.0 . ASSIM , VOCÊ PODE SUBSTITUIR A TAG DE TÍTULO DA LISTA POR UMA TAG DE TÍTULO CONVENCIONAL , < H4 > , POR EXEMPLO . CASO CONTRÁRIO , O PRIMEIRO ELEMENTO DA LISTA APARECERÁ AO LADO DO TÍTULO , NO INTERNET EXPLORER .





LISTA 2 – LISTA NUMERADA

CONCEITO

NORMALMENTE , FARIAMOS UMA LISTA NUMERADA SIMPLESMENTE COLOCANDO NÚMEROS ADIANTE DOS ELEMENTOS . ASSIM , ONDE SE DIGITOU “ ENTERPRISE “ , DIGITAR-SE-IA ( ROA-SE , JÂNIO QUADROS ) “ 1-ENTERPRISE ” E ASSIM POR DIANTE . A DESVANTAGEM É QUE QUANDO DESEJAMOS ELIMINAR OU ADCIONAR UM ITEM , TODA A NUMERAÇÃO POSTERIOR A ESSE ITEM DEVE SER MANUALMENTE ALTERADA .

EM HTML , PORÉM , TEMOS O RECURSO DE AUTONUMERAÇÃO . INDICAMOS AO BROWSER QUE AQUELA DEVE SER UMA LISTA NUMERADA E ELE FAZ O RESTO . ESSA INDICAÇÃO É FEITA COM A SUBSTITUIÇÃO DA TAG DE LISTA NORMAL , < UL > , PELA TAG DA LISTA NUMERADA .

EXEMPLO

VEJAMOS UMA LISTA NUMERADA :

< OL >

< LH > TÍTULO DA LISTA < / LH >

< LI > ELEMENTO 1

< LI > ELEMENTO 2

< LI > ELEMENTO 3

< / OL >

PRATIQUE NO MICRO

ALTERE A LISTAGEM DE NOSSA LISTA-EXEMPLO , SUBSITUINDO A TAG DE LISTA COMUM PELA DE LISTA NUMERADA ., COMPARE SE O RESULTADO É IGUAL À FIGURA ABAIXO :

RESULTADO DA LISTAGEM ANTERIOR , INDICA QUE O BROWSER RECONCECE A TAG DE LISTA NUMERADA , E SABE CONTAR ATÉ QUASE 10 .





LIÇÃO 3 - VARIAÇÕES SOBRE O TEMA

CONCEITO

O PESSOAL QUE DESENVOLVEU O PADRÃO HTML , NÃO BRINCA EM SERVIÇO E DISPONIBILIZA ALGUMAS VARIAÇÕES INTERESSANTES NA TAG DE LISTAS . TODAS ESSAS OPÇÕES SÃO ACESSÍVEIS COM O ELEMENTO T Y P E - X , NA TAG DE INÍCIO DA LISTA , < OL >

NAS LIÇÕES SEGUINTES , EXEMPLOS DE VÁRIOS TIPOS DE LISTA , USANDO VARIAÇÕES DO ELEMENTO TYPE .

A MAIOR PARTE DESSAS VARIAÇÕES NÃO É RECONHECIDA PELO INTERNET EXPLORER , MAS AS LISTAS NÃO DEIXAM DE SER EXIBIDAS . APENAS O SÃO , SEM OS EFEITOS .

EXEMPLO

PODEMOS TER LISTAS COM DIVERSAS VARIANTES , ENTRE ELAS :

# NUMERADAS

# BULLETS DE DIVERSOS TIPOS

# ALGARISMOS ROMANOS

PRATIQUE NO MICRO

IDENTIFIQUE , NA INTERNET , QUANTOS TIPOS DE LISTA DIFERENTES VOCÊ PUDER ACHAR . ANOTE AS PÁGINAS , E ESTUDE OS COMANDOS UTILIZADOS .

LIÇÃO 4 - LISTA EM ALGARISMOS ROMANOS

CONCEITO

SIM , AQUELA NUMERAÇÃO CHATA , QUE 98% DAS PESSOAS SÓ CONHECE DE 1 A 10 . COM A SIMPLES INCLUSÃO DE LINHA < OL TYPE=I,II,III...> EM SUA PÁGINA , O BROWSER CUIDA DE TODO O TRABALHO DURO , GERANDO A NUMERAÇÃO AUTOMATICAMENTE .





EXEMPLO

A NOSSA LISTAGEM , COM A INCLUSÃO DO ELEMENTO TYPE=I,II,III... FICARIA ASSIM :

< HTML >

< HEAD > < TITLE > EXEMPLO DE LISTA < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< BASEFONT SIZE=5 >

< BR > < BR >

< OL TYPE-I,II,III... >

< LH > LISTA NUMERADA < / LH >

< LI > ENTERPRISE

< LI > VOYAGER

< LI > INTREPID

< LI > EXCELSIOR

< LI > RELIANT

< LI > PASTERUR

< LI > HORACIO

< LI > HOOD

< LI > TSIOLKOVASKY

< / OL >

< / BODY >

< / HTML >

E O RESULTADO :

LISTA NUMERADA AUTOMATICAMENTE EM ALGARISMOS ROMANOS .





O ELEMENTO < OL TYPE=I,II,III... > É SENSÍVEL AO ESTADO MAIÚSCULA / MINÚSCULA . SE VOCÊ COLOCAR OS TRÊS IS MAIÚSCULOS EM CAIXA BAIXA , O RESULTADO SERÁ UMA LISTA EM ALGARISMOS ROMANOS MINÚSCULOS . SE É QUE ISSO EXISTE .

PRATIQUE NO MICRO

CRIE LISTAS GRANDES E VEJA COMO O SEU BROWSER CONSEGUE NUMERAR EM ROMANOS SEM DIFICULDADE VALORES COMO 137 , 245 E 2001 .

LIÇÃO 5 - LISTA ALFABÉTICA

CONCEITO

UMA LISTA ALFABÉTICA É UMA LISTA " TOPICALIZADA " , COM UM ELEMENTO SENDO O A , OUTRO B , E ASSIM POR DIANTE. UMA LISTA DESSAS É CONSEGUIDA , EM HTML , COM O USO DA SEGUINTE VARIANTE DA TAG < OL > :

< OL TYPE=A,B,C... >

EXEMPLO

NOSSA VELHA LISTA , AGORA COM A SEQUÊNCIA INDICADA POR LETRAS :

< HTML >

< HEAD > < TITLE > EXEMPLO DE LISTAS < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< BASEFONT SIZE=5 >

< BR > < BR >

< OL TYPE=A,B,C... >

< LH > LISTA NUMERADA < / LH >

< LI >ENTERPRISE

< LI >VOYAGER

< LI >INTREPID

< LI >EXCELSIOR

< LI >RELIANT

< LI >PASTEUR

< LI >HORACIO

< LI >HOOD

< LI >TSIOLKOVSKY

< / OL >

< / BODY >

< / HTML >





NOSSA LISTA , COM OS ELEMENTOS DIVIDIDOS EM TÓPICOS .

AQUI TAMBÉM VALE A REGRA DE CAIXA ALTA / BAIXA . USANDO "a,b,c..." NO LUGAR DE "A,B,C..." NO ELEMENTO TYPE , CONSEGUE-SE UMA LISTA DE TÓPICOS EM MINÚSCULA .

PRATIQUE NO MICRO

ALTERE NOSSA LISTA , PARA QUE OS ELEMENTOS SEJAM LISTADOS PRIMEIRO EM ALGARISMOS ROMANOS MINÚSCCULOS , DEPOIS EM TÓPICOS , TAMBÉM MINÚSCULOS .





NOSSA LISTA , COM OS ELEMENTOS DIVIDIDOS EM TÓPICOS .

AQUI TAMBÉM VALE A REGRA DE CAIXA ALTA/BAIXA . USANDO "a,b,c..." NO LUGAR DE "A,B,C..." NO ELEMENTO TYPE , CONSEGUE-SE UMA LISTA DE TÓPICOS EM MINÚSCULA .

PRATIQUE NO MICRO

ALTERE NOSSA LISTA , PARA QUE OS ELEMENTOS SEJAM LISTADOS PRIMEIRO EM ALGARISMOS ROMANOS MINÚSCCULOS , DEPOIS EM TÓPICOS , TAMBÉM MINÚSCULOS .

LIÇÃO 6 - LISTA COM BULLETS

CONCEITO

NESTE TIPO DE LISTA , OS DADOS NÃO SÃO NUMERADOS , APENAS PRECEDIDOS POR UM SINAL GRÁFICO , COMO UM QUADRADINHO OU UM PONTO . PARA PRODUZIR UMA LISTA ASSIM , DEVEMOS USAR O ELEMENTO TYPE , MAS COM A TAG DE LISTA < UL > . ASSIM , TEMOS :

< UL TYPE=BULLET >

ONDE BULLET É UM DOS TRÊS VALORES VÁLIDOS :

- CIRCLE

- SQUARE

- DISC





EXEMPLO

VAMOS ALTERAR NOSSA LISTA , PARA QUE ELA USE QUADRADOS , AO INVES DE NÚMEROS OU LETRAS :

< HEAD > < TITLE > EXEMPLO DE LISTAS < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< BASEFONT SIZE=5 >

< BR > < BR >

< UL TYPE=SQUARE >

< LH > LISTA UTILIZANDO BULLETS < / LH >

< LI > ENTERPRISE

< LI > VOYAGER

< LI > INTREPID

< LI > EXCELSIOR

< LI >RELIANT

< LI > PASTEUR

< LI > HORACIO

< LI > HOOD

< LI >TSIOLKOVSKY

< / UL >

< / BODY >

< / HTML >

O RESULTADO É :

LISTA USANDO O RECURSO DE GRÁFICOS PARA INDICAR OS ELEMENTOS .





O VALOR "DISC" FAZ COM QUE O SINAL GRÁFICO USADO NA LISTA SEJA UMA BOLINHA , JÁ O "CIRCLE" , SABE-SE LÁ POR QUE , PRODUZ UM QUADRADO VAZADO . MISTÉRIOS DO NETSCAPE .

PRATIQUE NO MICRO

EXPERIMENTE ALTERAR NOSSA LISTA , PARA EXIBIR PÁGINAS COM OS VALORES "DISC" E "CIRCLE" , NO ELEMENTO TYPE .

LIÇÃO 7 - LISTAS DENTRO LISTAS

CONCEITO

NÃO HÁ IMPEDIMENTO ALGUM EM UTILIZAR , COMO ELEMENTO DE UMA TAG < LI > , QUALQUER OUTRO ELEMENTO DE HTML . ASSIM , PODEMOS LISTAR IMAGENS , LINKS , E , TAMBÉM , LISTAS .

EXEMPLO

VAMOS VER COMO FICA NOSSA LISTA , QUANDO INCLUIMOS , COMO ELEMENTO NÚMERO 6 , UMA LISTA. A TABULAÇÃO UTILIZADA É APENAS PARA MELHOR VISUALIZAR A LISTAGEM . NÃO INFLUENCIA NA INTERPRETAÇÃO DOS DADOS PELO BROWSER .

FOI USADA , TAMBÉM , UMA TAG < FONT SIZE=N > , PARA ALTERAR O TAMANHO DOS CARACTERES DA SEGUNDA LISTA , PARA FACILITAR A DISTINÇÃO ENTRE ELAS .

< HTML >

< HEAD > < TITLE > EXEMPLO DE LISTAS < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< BASEFONT SIZE=5 >

< BR > < BR >

< OL TYPE=1,2,3... >

< LH > LISTA DENTRO DE LISTA < / LH >

< LI > ENTRERPRISE

< LI > VOYAGER

< LI > INTREPID

< LI > EXCELSIOR

< LI > RELIANT

< LI > < OL TYPE=a,b,c... >

< FONT SIZE=3 >

< LH > LISTA INTERNA < LH >





< LI > ENTERPRISE

< LI > VOYAGER

< LI > INTREPID

< LI > EXCELSIOR

< LI > RELIANT

< LI > PASTEUR

< LI > HORACIO

< LI > HOOD

< LI > TSIOLKOVSKY

< / OL >

< / FONT >

< LI > PASTEUR

< LI > HORACIO

< LI > HOOD

< LI > TSIOLKOVSKY

< / OL >

< / BODY >

< / HTML >

RESULTADO DA LISTAGEM ANTERIOR .

PRATIQUE NO MICRO

CRIE ALGUMAS LISTAS ENCADEADAS , FORMATANDO-AS , NO CÓDIGO FONTE , COM TABULAÇÕES PROGESSIVAS , COMO NA LISTAGEM DA FIGURA ANTERIOR . TREINE VISUALIZAR A LISTAGEM , PARA NÃO SE CONFUNDIR COM TANTOS < LI > ESPALHADOS . EXPERIMENTE TAMBÉM INSERIR IMAGENS COMO ELEMENTOS DA TAG < LI > .





UNIDADE VIII

TABELAS

AS TABELAS SÃO UM ELEMENTO ESSENCIAL EM UMA BOA HOME PAGE , EXERCENDO INCLUSIVE FUNÇÕES POUCO ORTODOXAS , COMO FORMATAÇÃO DE TEXTO . VEREMOS , NESSA UNIDADE , UM POUCO SOBRE COMO FUNCIONAM AS TABELAS EM HTML , NA NOVA VERSÃO 3.2 E QUE TIPOS DE TRUQUES PODEM SER FEITOS COM ELAS .





LIÇÃO 1 – TABELA

CONCEITO BASICAMENTE , TABELAS SÃO SEQUÊNCIAS DE DADOS ALINHADOS DE FORMA ORDENADA , SEPARADOS POR FIOS , FORMANDO UMA MATRIZ . VEMOS TABELAS EM EDITORES DE TEXTO , COMO WORD , EM HTML E EM PROGRAMAS COMO O EXCEL E O LOTUS 1 , 2 , 3 . NESSES ÚLTIMOS AS TABELAS SÃO CHAMADAS DE PLANILHAS , POIS OS DADOS NÃO SÃO APENAS EXIBIDOS , MAS CALCULADOS E ALTERADOS DINAMICAMENTE . ISSO AINDA ESTÁ FORA DAS CAPACIDADES DO HTML .

AS TABELAS EM HTML SÃO DEFINIDAS PELA TAG < TABLE > ... < / TABLE > , E SUAS AUXILIARES , QUE CONTROLAM QUANTIDADE DE CÉLULAS , ALINHAMENTO , TÍTULOS , ETC .

EXEMPLO

VEJAMOS UMA TABELA MÍNIMA , EM HTML , COM APENAS UM TÍTULO , UMA CÉLULA SEM CABEÇALHO E UMA BORDA SIMPLES :

< HTML >

< HEAD > < TITLE > TABELA MÍNMA < / TITLE > < / HEAD >

< BODY >

< BR > < BR > < BR >

< CENTER >

< TABLE BORDER=1 >

< CAPTION > TABELA MÍNIMA < / CAPTION >

< TR > < TD > UMA CÉLULA APENAS < / TD > < / TR >

< / TABLE >

< / CENTER >

< / BODY >

< / HTML >

E A TABELA RESULTANTE :





TABELA GERADA PELA LISTAGEM ANTERIOR .

PRATIQUE NO MICRO

PROCURE , NA INTERNET , EXEMPLOS DE TABELAS E TENTE DESCOBRIE QUANTOS USOS DIFERENTES PODEM SER FEITOS DESSE RECURSO .

LIÇÃO 2 - O TÍTULO DA TABELA

CONCEITO

APESAR DE PARECER REDUNDNTE , CRIAR MAIS UMA TAG DE TÍTULO , NO CASO DA TABELA , É UM RECURSO INTERESSANTE , POIS A TAG < CAPTION > TÍTULO DA TABELA < / CAPTION > TEM A BEM-VINDA CARACTERÍSTICA DE CENTRALIZAR O TÍTULO EM RELAÇÃO À TABELA .

EXEMPLO

VAMOS CRIAR TABELAS GÊMEAS , MODIFICANDO APENAS O ALINHAMENTO . REPARE QUE , NÃO IMPORTA ONDE ESTEJAM LOCALIZADAS , O TÍTULO ESTÁ SEMPRE CENTRALIZADO EM RELAÇÃO A ELAS .

< HTML >

< HEAD > < TITLE > TABELA MÍNIMA < / TITLE > < / HEAD >

< BODY >

< BR > < BR > < BR >

< CENTER > < TABLE BORDER=1 > < CAPTION > TABELA MÍNIMA < / CAPTION >





< TR > < TD > UMA CÉLULA APENAS < / TD > < / TR >

< / TABLE >

< / CENTER >

< TABLE BORDER=1 >

< CAPTION > TABELA MÍNIMA < / CAPTION >

< TR > < TD > UMA CÉLULA APENAS < / TD > < / TR >

< / TABLE >

< / BODY >

< / HTML >

RESULTADO DA LISTAGEM ANTERIOR. NOTE O ALINHAMENTO CONSTANTE TÍTULO/TABELA .

PRATIQUE NO MICRO

FAÇA EXPERIMENTOS COM A TAG < CAPTION > , INSERINDO TÍTULOS MUITO LONGOS , E TENTANDO FORMATAR COM OUTRAS TAGS O CONTEÚDO DA MESMA . TENTE UMA TABELA COM TÍTULO COLORIDO , POR EXEMPLO .

LIÇÃO 3 - INSERINDO DADOS

CONCEITO

EM UMA TABELA HTML , TEMOS O CONCEITO DE LINHA DE DADOS . UMA LINHA É DEFINIDA PELAS TAGS < TR > ... < / TR > , E PODE CONTER NENHUMA OU MAIS CÉLULAS DE DADOS . AS CÉLULAS DE DADOS SÃO DEFINIFAS PELA TAG < TD > ... < / TD > . UMA CÉLULA DE DADOS PODE CONTER QUALQUER ELEMENTO HTML VÁLIDO , SEJA UMA IMAGEM , UM ELEMENTO DE FORMULÁRIO , OU MESMO OUTRA TABELA .





EXEMPLO

UMA PEQUENA TABELA , COM DUAS LINHAS E TRÊS COLUNAS DE DADOS CADA . NOTE QUE O RESTO DA PÁGINA FOI OMITIDO . AS ALTERAÇÕES SÃO APENAS NAS TAGS < TABLE > .

< TABLE BORDER=1 >

< CAPTION > GRANDES EMPRESAS < / CAPTION >

< TR > < TD > SOFTWARE < / TD > < TD > MICROSOFT< / TD > < TD > ADOBE < /TD > < TD > ORACLE < / TD > < / TR >

< TR > < TD > HARDWARE < / TD > < TD > HEWLETT PACKARD < / TD > < TD > SILICON GRAPHICS < / TD > < TD > INTEL < / TD > < / TR >

< / TABLE >

PÁGINA GERADA PELA LISTAGEM ANTERIOR .

SE VOCÊ ACHAR A LISTAGEM CONFUSA , EXPERIMENTE RETIRAR OS DADOS DAS CÉLULAS . A ESTRUTURA DA TAG < TABLE > FICARÁ MAIS EVIDENTE AINDA .





PRATIQUE NO MICRO

EXPERIMENTE DIVERSOS TIPOS DE DADOS E ALINHAMENTOS , COMO VALORES MONETÁRIOS , NÚMEROS E NOMES DE DIFERENTES COMPRIMENTOS . VEJA QUAL ALINHAMENTO SE ENQUADRA MELHOR COM CADA TIPO DE DADO .

LIÇÃO 5 - CABEÇALHOS

CONCEITO

UMA TABELA NÃO É UMA TABELA SEM UM CABEÇALHO PARA OS DADOS . EM HTML , USA-SE A TAG < TH > ... < / TH > PARA ESSE FIM . COM ELA , O TEXTO É AUTOMATICAMENTE CENTRALIZADO ( SEM NECESSIDADE DO ELEMENTO ALIGN ) E EXIBIDO EM NEGRITO .

EXEMPLO

VAMOS VER UMA TABELA , UTILIZANDO A TAG < TH > PARA GERAR OS CABEÇALHOS DAS LINHAS E COLUNAS :

< TABLE BORDER=1 >

< CAPTION > AGENDA DA SEMANA < / CAPTION >

< TR > < TH > < / TH > < TH > MANHÃ < / TH > < TH > TARDE < / TH > < TH > NOITE < / TH > < / TR >

< TR > < TH > SEGUNDA < / TH > < TD > CLINTON < / TD > < TD > GATES > < / TD > < TD > PFEIFFER > < / TR >

< TR > < TH > TERÇA < / TH > < TD > YELTSIN < / TD > < TD > FORBES < / TD > < TD > STONE < / TD > < / TR >

< TR > < TH > QUARTA < / TH > < TD > KHADAFI < / TD > < TD > J.P. GETTY < / TD > < TD > MARILYN < / TD > < / TR >

< / TABLE >

TABELA ANTERIOR , COMO VISTA NO NETSCAPE .





REPARE QUE É USADO UM PEQUENO TRUQUE : NOSSA PRIMEIRA LINHA SÓ TEM TRÊS CÉLULAS VÁLIDAS , RELATIVAS AO HORÁRIO . AS OUTRAS LINHAS , POR SUA VEZ , SÃO COMPOSTAS DE QUATRO CÉLULAS : O DIA DA SEMANA , E AS TRÊS RELATIVAS AOS HORÁRIOS .

ISSO FOI RESOLVIDO CRIANDO-SE UMA CÉLULA VAZIA NA PRIMEIRA LINHA , TRANSFORMANDO-A , TAMBÉM , EM UMA LINHA DE QUATRO CÉLULAS .

PRATIQUE NO MICRO

RETIRE A CÉLULA VAZIA DA TABELA ANTERIOR E VEJA O QUE ACONTECE. DEPOIS , PRODUZA TABELAS COM NÚMEROS IRREGULARES DE CÉLULAS POR LINHA E ESTUDE OS RESULTADOS .

LIÇÃO 6 - BORDAS

CONCEITO

POR DEFAULT , AS TABELAS EM HTML , NÃO APRESENTAM MOLDURA , OU BORDAS .

PARA UTILIZAR BEM UMA TABELA SEM BORDAS , É PRECISO SER UM DESIGNER DE PRIMEIRO TIME . NÓS , POBRES MORTAIS , UTILIZAMOS O ELEMENTO BORDER=X , DENTRO DA TAG < TABLE > , ONDE X , COMO VOCÊ JÁ SABE , É A ESPESSURA DA BRODA , EM PIXELS .

EXEMPLO

ABAIXO , A TABELA DO EXEMPLO ANTERIOR , NA QUAL O ELEMENTO BORDER TEVE SEU VALOR ALTERADO PARA 15 .

EXEMPLO DO ELEMENTO BORDER .





O VALOR 15 , UTILIZADO NO EXEMPLO ANTERIOR , NÃO DEVE SER USADO . NA PRÁTICA , TABELAS COM VALORES ACIMA DE 10 NO ELEMENTO BORDER NÃO FICAM ESTETICAMENTE INTERESSANTES .

PRATIQUE NO MICRO

EXPERIMENTE DIVERSOS VALORES PARA O ELEMENTO BORDER . VEJA QUAL SE HARMONIZA MELHOR EM SUA PÁGINA .

LIÇÃO 7 - IMAGENS EM TABELAS

CONCEITO

QUALQUER ELEMENTO HTML , PODE FAZER PARTE DE UMA TABELA , INCLUSIVE IMAGENS . UM TRUQUE INTERESSANTE , INCLUSIVE , É UTILIZAR UMA TABELA MÍNIMA COMO MOLDURA DE UMA IMAGEM . CONSEGUE-SE COM ISSO UM BELO EFEITO 3D , COM UM ESFORÇO MÍNIMO .

EXEMPLO

VAMOS ESCOLHER UMA IMAGEM ALEATORIAMENTE , E INSERÍ-LA EM UMA TABELA . NO CASO , O ARQUIVO GIF CHAMA-SE IMAGEM .GIF , MAS PODE SER QUALQUER UM . A LISTAGEM FICARIA ASSIM :

< HTML >

< HEAD > < TITLE > TABELA < / TITLE > < / HEAD >

< BODY > < BR > < BR > < BR >

< CENTER >

< TABLE BORDER=15 >

< CAPTION > IMAGEM.GIF < / CAPTION >

< TR > < TD > < IMG SRC="IMAGEM.GIF" > < / TD > < / TR >

< / TABLE >

< / CENTER >

< / BODY >

< / HTML >

E A PÁGINA RESULTANTE :





TABELA UTILIZADA COMO MOLDURA PARA UMA IMAGEM .

PRATIQUE NO MICRO

CRIE DIVERSAS PEQUENAS IMAGENS , E USE-AS COMO BULLETS EM UMA TABELA .

PARA EXIBIR A PÁGINA COM MAIS VELOCIDADE , NÃO ESQUEÇA DOS ELEMENTOS HEIGHT E WIDTH NA TAG IMAGEM .

LIÇÃO 8 - FORMATAÇÕES ADCIONAIS - CELLSPACING

CONCEITO

O ELEMENTO CELLSPACING=X CONTROLA O ESPAÇO ENTRE AS CÉLULAS DE UMA TABELA . ALTERANDO-SE O VALOR X , CONSEGUIMOS PAREDES INTERCELULARES MAIS OU MENOS ESPESSAS . ESTE ELEMENTO É 3 PARTE INTEGRANTE DA TAG < TABLE > .

EXEMPLO

VAMOS VER A NOSSA TABELA-EXEMPLO , COM A INCLUSÃO DO ELEMENTO CELLSPACING=10 , NA TAG < TABLE > . A LINHA ALTERADA FICARIA ASSIM :

< TABLE BORDE=3 CELLSPACING=10 >





TABELA COM INCLUSÃO DO ELEMENTO CELLSPACING=10 .

PRATIQUE NO MICRO

ALTERE OUTRAS TABELAS-EXEMPLO , INCLUINDO O ELEMENTO CELLSPACING . VEJA QUAL A MODIFICAÇÃO GERADA POR DIFERENTES VALORES .

LIÇÃO 9 - FORMATAÇÕES ADICIONAIS - CELLPADDING

CONCEITO

ESTE ELEMENTO É O MAIS IMPORTANTE PARA A CRIAÇÃO DE TABELAS ESTETICAMENTE AGRADÁVEIS . ELE REGULA O ESPAÇO ENTRE OS DADOS DE UMA CÉLULA E SUA BORDA . GERA CÉLULAS MAIS AREJADAS E , CONSEQUENTEMENTE , ELEGANTES . A SINTAXE É INDÊNTICA AO ELEMENTO CELLSPACING E TAMBÉM É PARTE DA TAG < TABLE > .

EXEMPLO

VAMOS VER NOSSA TABELA , AGORA COM A INCLUSÃO DO ELEMENTO CELLPADDING , FORMANDO A SINTAXE DA LINHA DA TAG < TABLE > ALGO COMO :

< TABLE BORDER=3 CELLPADDING=10 >

RESULTADO SERÁ UMA TABELA COMO ESSA :





TABELA ALTERADA COM O ELEMENTO CELLPADDING .

PRATIQUE NO MICRO

REFORMATE SUAS TABELAS , COM O USO DO ELEMENTO CELLPADDING . APÓS ISSO , GERE NOVAS TABELAS , MESCLANDO SEU USO COM O ELEMENTO CELLSPACING .

LIÇÃO 10 - FORMATAÇÕES ADICIONAIS - WIDTH E HEIGHT

CONCEITO

OS ATRIBUTOS WIDTH E HEIGHT DEFINEM , RESPECTIVAMENTE , A LARGURA E A ALTURA DE UMA TABELA OU CÉLULA . QUANDO UTILIZADOS EM UMA TAG < TABLE > , INDICAM O TAMANHO DA TABELA INTEIRA.USADOS EM TAGS < TH > OU < TD > , AFETAM SOMENTE A CÉLULA INDICADA .

OS VALORES PODEM SER EXPRESSOS EM PIXELS OU EM PERCENTUAL. RECOMENDA-SE VEEMENTEMENTE QUE SEMPRE SEJAM USADOS VALORES PERCENTUAIS . ASSIM , NÃO PRECISAMOS ADIVINHAR A RESOLUÇÃO GRÁFICA DE QUEM VAI ACESSAR A PÁGINA COM NOSSA TABELA .

EXEMPLO

VAMOS VER NOSSA TABELA-EXEMPLO , COM A ADIÇÃO DOS ELEMENTOS WIDTH E HEIGHT , CADA UM COM UM VALOR DE 80% . A LISTAGEM-FONTE , APENAS DA TAG < TABLE > , É A SEGUINTE :





< TABLE BORDER=3 WIDTH=80% HEIGHT=80% >

< CAPTION > AGENDA DA SEMANA < / CAPTION >

< TR > < TH > < / TH > < TH > MANHÃ < / TH > < TH > TARDE < / TH > < TH > NOITE < / TH > < / TR >

< TR > < TH > SEGUNDA < / TH > < TD > CLINTON < / TD > < TD > GATES < / TD > < TD > PFEIFFER < / TD > < / TR >

< TR > < TH > TERÇA < / TH > < TD > YELTSIN < / TD > < TD > FORBES < / TD > < TD > STONE < / TD > < / TR >

< TR > < TH > QUARTA < / TH > < TD > KHADFI < / TD > < TD > J.P. GETTY < / TD > < TD > MARILYN < / TD > < / TR >

< / TABLE >

A IMAGEM RESULTANTE É :

IMAGEM RESULTANTE DO CÓDIGO ACIMA .

PRATIQUE NO MICRO

EXPERIMENTE ENCONLHER E AMPLIAR UMA TABELA " NA MARRA " , COM OS ELEMENTOS WIDTH E HEIGHT . VEJA O QUE ACONTECE QUANDO UMA TABELA É FORÇADA A OCUPAR UM ESPAÇO PEQUENO DEMAIS .

LIÇÃO 11 - FORMATAÇÕES ADICIONAIS - COLSPAN E ROWSPAN

CONCEITO

UMA CARACTERÍSTICA BEM-VINDA DAS PLANILHAS MAIS MODERNAS É A CAPACIDADE DE ESTENDER OS DADOS DE UMA CÉLULA , FAZENDO COM QUE ELES OCUPEM O ESPAÇO DE OUTRAS CÉLULAS . ISSO É ÚTIL , POR EXEMPLO , QUANDO TEMOS UMA COLUNA DE " RESULTADO " , DIVIDIDA EM DUAS SUBCOLUNAS , " SIM " OU " NÃO " .





EM HTML , ISSO É FEITO COM O ELEMENTO COLSPAN , APLICADO A UMA CÉLULA . QUANDO QUEREMOS QUE UMA CÉLULA SE ESPALHE VERTICALMENTE , UTILIZAMOS A VARIAÇÃO ROWSPAN .

EXEMPLO

VAMOS ALTERAR NOSSA TABELA , ABOLINDO O TÍTULO DA MESMA , E SUBSTITUINDO-O POR UMA ÚNICA CÉLULA , QUE OCUPARÁ TODA A LARGURA DA TABELA , GRAÇAS AO ELEMENTO COLSPAN . A SINTAXE DA TAG < TABLE > UTILIZADA SERÁ :

< TABLE BORDER=3 >

< TR > < TH COLSPAN=4 > AGENDA DA SEMANA < / TH > < TR >

< TR > < TH > < / TH > < TH > MANHÃ < / TH > < TH > TARDE < / TH > < TH > NOITE < / TH > < / TR >

< TR > < TH > SEGUNDA < / TH > < TD > CLINTON < / TD > < TD > GATES < / TD > < TD > PFEIFFER < / TD > < / TR >

< TR > < TH > TERÇA < / TH > < TD > YELSIN < / TD > < TD > FORBES < / TD > < TD > STONE < / TD > < / TR >

< TR > < TH > QUARTA < / TH > < TD > KHADAFI < /TD > < TD > J.P. GETTY < / TD > < TD > MARILYN < / TD > < / TR >

< / TABLE >

E A TABELA RESULTANTE ...

PÁGINA RESULTANTE DA LISTAGEM ANTERIOR .





PRATIQUE NO MICRO

EXPERIMENTE ALTERAR NOSSA TABELA EXEMPLO , TROCANDO O ELEMENTO COLSPAN POR ROWSPAN , E VEJA O RESULTADO . TENTE TAMBÉM VALORES INFERIORES AO TOTAL DE LINHAS OU COLUNAS DA TABELA , PARA VER COMO O BROWSER RESOLVE A FORMATAÇÃO .

LIÇÃO 12 - FORMATAÇÕES ADICIONAIS - VALIGN

CONCEITO

O ALINHAMENTO VERTICAL DOS ELEMENTOS DE UMA CÉLULA É DETERMINADO POR ESSA TAG . O DEFAULT É CENTRALIZADO , MAS PODE SER QUE SEJA NECESSÁRIO QUE OS ELEMENTOS SEJAM ALINHADOS POR BAIXO OU CIMA . ISSO VAI DEPENDER DO LAYOUT E É BOM DISPOR DO ELEMENTO , MESMO QUE NÃO SEJA UTILIZADO .

EXEMPLO

VAMOS MAIS UMA VEZ ALTERAR NOSSA TABELA-EXEMPLO . NA SEGUNDA LINHA DE DADOS , INCLUIMOS UM ELEMENTO VALIGN=TOP E , NA TERCEIRA LINHA , INCLUIMOS O VALIGN=BOTTOM .

< TABLE BORDER=3 >

< CAPTION > AGENDA DA SEMANA < / CAPTION >

< TR > < TH > < / TH > < TH > MANHÃ < / TH > < TH > TARDE < / TH > < TH > NOITE < / TH > < / TR >

< TR VALIGN=TOP > < TH > SEGUNDA < / TH > < TD > CLINTON < / TD > < TD > GATES < / TD > < TD > PFEIFFER < / TD > < / TR >

< TR VALIGN=BOTTOM > < TH > TERÇA < / TH > < TD > YELTSIN < / TD > < TD > FORBES < / TD > < TD > STONE < / TD > < / TR >

< TR > < TH > QUARTA < / TH > < TD > KHADAFI < / TD > < TD > J.P. GETTY < / TD > < TD > MARILYN < / TD > < / TR >







CÓDIGO INTERPRETADO PELO NETSCAPE ; REPARE NO USO DO ELEMENTO HEIGHT PARA REALÇAR O VALIGN .

PRATIQUE NO MICRO

ENCONTRE SITUAÇÕES ONDE O USO DO ALINHAMENTO VERTICAL DOS ELEMENTOS DE UMA TABELA É INTERESSANTE .





F I M





IMPRIMIR AQUI, PRINTER HERE...