Baixe Linguagem de Programação HTML e outras Notas de estudo em PDF para Linguagem de Programação, somente na Docsity! LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 1 Universo Minas LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 2 1. Introdução __________________________________________________________________________ 6 1.1. Internet _________________________________________________________________________ 6 1.2. Intranet _________________________________________________________________________ 6 1.3. WWW (World Wide Web) __________________________________________________________ 7 1.4. Web ___________________________________________________________________________ 7 1.5. Hipertexto _______________________________________________________________________ 8 1.6. Links ou Hyperlinks ________________________________________________________________ 8 1.7. Home Page_______________________________________________________________________ 8 1.8. Site ____________________________________________________________________________ 9 1.9. Browsers (Navegadores da Web)______________________________________________________ 9 1.10. Protocolo ______________________________________________________________________ 10 1.11. Protocolo HTTP (HyperText Transfer Protocol)__________________________________________ 10 1.12. Protocolo FTP (File Transfer Protocol) ________________________________________________ 10 1.12.1. FTP Anônimo _______________________________________________________________ 11 1.13. URL (Uniform Resource Locator) ____________________________________________________ 11 1.13.1. URL Absoluto_______________________________________________________________ 12 1.13.2. URL Relativo________________________________________________________________ 12 1.13.3. Endereço___________________________________________________________________ 12 1.13.4. Entendendo uma URL _________________________________________________________ 13 1.14. ISP (Internet Service Provider) ______________________________________________________ 14 1.14.1. Provedores _________________________________________________________________ 14 1.14.2. Seu Site na Grande Rede _______________________________________________________ 14 1.14.3. Login _____________________________________________________________________ 14 1.15. Resolução _____________________________________________________________________ 15 2. HTML (HyperText Markup Language)_____________________________________________________ 15 2.1. TAGs__________________________________________________________________________ 16 2.2. Estrutura Básica__________________________________________________________________ 17 2.2.1. Início e Fim do Documento ______________________________________________________ 17 2.2.2. Definições Lógicas sobre o Documento_____________________________________________ 17 2.2.3. Título da Página ______________________________________________________________ 17 2.2.4. Conteúdo da Página ___________________________________________________________ 17 2.3. TAG com Atributos _______________________________________________________________ 18 3. Estrutura da Página ___________________________________________________________________ 19 3.1. HTML <html>...</html> ____________________________________________________________ 19 3.2. HEAD <head>...</head> ___________________________________________________________ 19 3.2.1. Elementos presentes em HEAD___________________________________________________ 20 TITLE <title>...</title> ______________________________________________________________ 20 SCRIPT <script>...</script> __________________________________________________________ 20 META <meta>____________________________________________________________________ 20 LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 5 26.1. Programas CGI (Commom Gateway Interface) ___________________________________________ 85 26.2. Client Side _____________________________________________________________________ 85 26.3. ASP (Active Server Pages)_________________________________________________________ 86 26.4. PHP (Personal Home Page)_________________________________________________________ 86 26.5. Criptografia ____________________________________________________________________ 86 26.6. Plug-In________________________________________________________________________ 86 26.7. Applet ________________________________________________________________________ 86 26.8. Servlet ________________________________________________________________________ 86 26.9. Cookie ________________________________________________________________________ 87 26.10. Download_____________________________________________________________________ 87 26.11. Upload _______________________________________________________________________ 87 26.12. RGB _________________________________________________________________________ 87 26.13. CMYK _______________________________________________________________________ 87 LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 6 1. Introdução Antes de começarmos a estudar HTML, é necessário que se entenda alguns princípios básicos que envolvem esta linguagem. 1.1. Internet Internet é uma rede mundial de milhares de pequenas redes de computador e milhões de microcomputadores comerciais, educacionais, governamentais e pessoais que usa os protocolos TCP/IP (Transmission Control Protocol/Internet Protocol) para comunicação. No centro da Internet existem linhas de comunicação de dados de alta velocidade entre computadores host, consistindo em milhares de sistemas de computador comerciais, do governo, educacionais e outros, que encaminham dados e mensagens. Atualmente, a Internet oferece um grupo de serviços para usuários, como Correio Eletrônico, a World Wide Web, FTP, grupos de notícias Usenet, Gopher, IRC, telnet e outros. A Internet é como uma cidade eletrônica com bibliotecas virtuais, lojas virtuais, escritórios virtuais, galerias de arte virtuais, etc. TCP/IP (Transmission Control Protocol/Internet Protocol - Protocolo de Controle de Transmissão/Protocolo Internet) Conjunto de protocolos utilizados na troca de informações entre computadores de diferentes arquiteturas dentro da Internet. O TCP/IP está disponível para qualquer tipo de CPU e Sistema Operacional. 1.2. Intranet Intranet é uma rede desenvolvida para processamento de informações em uma empresa ou organização. Seu uso inclui serviços como distribuição de documentos e software, acesso a bancos de dados e treinamento. Uma intranet é assim chamada porque ela geralmente emprega aplicativos associados à Internet, como páginas da Web, navegadores da Web, sites FTP, Correio Eletrônico, grupos de notícias e listas de distribuição, acessíveis somente às pessoas que fazem parte da empresa. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 7 Firewall (Parede de Fogo) Firewall é um método para proteger os arquivos e programas em uma rede contra usuários em outra rede. Um firewall bloqueia o acesso indesejado a uma rede protegida, enquanto fornece à rede protegida o acesso às redes fora do firewall. Uma empresa geralmente irá instalar um firewall para dar aos usuários acesso à Internet enquanto protege as informações internas. 1.3. WWW (World Wide Web) (Ampla Rede Mundial) WWW é a sigla de World Wide Web que significa Rede Mundial (a grande rede de computadores interligados no mundo todo). A World Wide Web é resultado de um projeto para uma melhor distribuição de informações a grupos de pesquisas iniciado no ano de 1989 por cientistas do CERN (Centro European Researche Nucleare) laboratório de física sediado em Genebra, na Suiça, com o intuito de facilitar a comunicação interna e externa. Antes da WWW, os cientistas, assim como toda a comunidade Internet, necessitavam de uma série de programas distintos para localizar, buscar e visualizar as informações. Ao final de 1990, os pesquisadores no CERN possuiam um browser baseado em modo texto. Durante o ano de 1991 a WWW foi liberada para uso geral no CERN. Durante o ano de 1992, o CERN começou a anunciar o projeto WWW. No entanto, apenas em fins de 1993 a World Wide Web iniciou sua fase de crescimento explosivo, com a introdução da versão final do software NCSA Mosaic, um browser, para a comunidade Internet. Muitos browsers foram desenvolvidos para muitos sistemas de computadores. Em 1994, a WWW já havia se tornado uma das formas mais populares de acesso aos recursos da Internet. O objetivo inicial era, portanto, centralizar em uma única ferramenta as várias tarefas necessárias para se obter as informações disponíveis na Internet. Usuários de todo o mundo foram atraídos pela forma simples e divertida que a WWW disponibilizava o conteúdo da Internet. A organização World Wide Web Consortium (W3C) é responsável pela padronização do HTML. A especificação original do HTML foi desenvolvida, no CERN, por Tim Berners-Lee atual Preisidente do W3C, que transformou sua obra em patrimônio coletivo dos internautas. A versão padrão do HTML hoje é a 4.0. Entretando algumas versões de Browsers ainda interpretam somente a versão 3.2 do HTML. 1.4. Web LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 10 Internet Explorer Mozilla Firefox 1.10. Protocolo Protocolo é um conjunto de regras estabelecidas com o objetivo de permitir a comunicação entre computadores. É um método de acesso a um documento ou serviço através da Internet, como File Transfer Protocol (FTP) ou Hypertext Transfer Protocol (HTTP). Também denominado tipo. 1.11. Protocolo HTTP (HyperText Transfer Protocol) (Protocolo de Transferência de Hipertexto) HTTP é um protocolo da Internet utilizado pelos computadores ligados à Web para comunicar-se entre si, ativa os navegadores da Web para recuperarem informações de servidores da World Wide Web. O protocolo permite a um usuário usar um programa cliente para entrar em um URL (ou clicar em um hyperlink) e recuperar texto, elementos gráficos, som e outras informações digitais de um servidor da Web. Endereços URL de recursos HTTP começam com http:// 1.12. Protocolo FTP (File Transfer Protocol) (Protocolo de Trasferência de Arquivo) FTP é um protocolo que possibilita a transferência de arquivos de um local para outro pela Internet. Normalmente, os sites têm áreas públicas de FTP, permitindo que os usuários façam download de programas por esse processo. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 11 Protegido por senhas, o FTP também é utilizado para atualizar a distância sites localizados em empresas hospedeiras. URLs de arquivos em servidores FTP começam com ftp:// 1.12.1. FTP Anônimo A capacidade de acessar um sistema de computador remoto onde não se tem nenhuma conta, através do File Transfer Protocol (FTP - Protocolo de Transferência de Arquivo). Os usuários têm direitos de acesso restritos com o FTP Anônimo e, geralmente, podem somente listar, exibir ou copiar arquivos para ou a partir de um diretório público no sistema remoto. Muitos sites FTP não permitem o acesso ao FTP Anônimo para manter a segurança. 1.13. URL (Uniform Resource Locator) (Localizador de Recursos Uniforme) Um dos principais objetivos do projeto da WWW era o desenvolvimento de um padrão de referência a um item independente de seu tipo (som, filme, imagem, etc.). Para este objetivo foi desenvolvido a URL (Uniform Resource Locator). URL (Uniforme Resource Locator, numa tradução literal, Localizador Uniforme de Recursos) é uma seqüência de caracteres que fornece o endereço Internet de um Site da Web ou um recurso da World Wide Web, juntamente com o protocolo (como FTP ou HTTP) através do qual o site ou o recurso é acessado. A parte inicial do URL (a que termina com os dois pontos) indica qual protocolo Internet está sendo usado. As duas barras indicam que o que vem a seguir é o endereço de um servidor válido da Internet ou localização simbólica. Pode ser colocado um texto (www.universominas.com.br, por exemplo) ou o endereço IP do site. Endereço IP (Endereço do Protocolo Internet) A maneira padrão de identificar um computador conectado à Internet, da mesma forma que um número de telefone identifica um telefone em uma rede telefônica. Um endereço IP é representado por quatro números separados por pontos e onde cada número é menor que 256, por exemplo, 192.200.44.69. O administrador de seu servidor Web ou o provedor de serviços de Internet irá atribuir um endereço IP a seu computador. O tipo mais comum de URL é http://, que fornece o endereço Internet de uma página da Web. Alguns outros tipos de URL são: LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 12 ftp:// que fornece o local da rede de um recurso FTP. gopher:// que fornece o endereço Internet de um diretório gopher news:// grupos de discussão ou de notícias (newsgroups) mailto:// para especificar um endereço de Correio Eletrônico da Internet (para enviar correio eletrônico). 1.13.1. URL Absoluto indicamos o endereço completo do item que desejamos recuperar. O URL absoluto inclui um protocolo, como "http", local da rede, além de caminho e nome de arquivo, opcionais. Exemplo: http://www.universominas.com.br/treinamento/cursos.htm é um URL Absoluto 1.13.2. URL Relativo Uma referência relativa assume-se que a máquina e diretório do item já estão sendo usados e apenas necessita-se indicar o nome do arquivo desejado (ou posivelmente subdiretório e arquivo).Um URL relativo inclui um protocolo. Exemplo: O URL relativo Página de teste/index.htm refere-se à página Cursos.htm, na pasta Treinamento, abaixo da pasta atual. 1.13.3. Endereço Endereço é o caminho até um objeto, documento, arquivo, página ou outro destino. Um endereço pode ser um URL (Uniforme Resource Locator - Localizador Uniforme de Recursos) ou um caminho de rede UNC (Universal Naming Convention - Convenção Universal para Nomes), o formato padrão para caminhos que incluem um servidor de arquivo de rede de área local que utiliza a sintaxe a seguir: Exemplo: \\servidor\compartilhamento\caminho\nome do arquivo O endereço http://www.universominas.com.br indica um URL do Web Site da Universo Minas Ltda. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 15 1.15. Resolução Resolução é o numero de pixels usados para capturar ou exibir uma imagem. A resolução VGA padrão é 640 pixels na horizontal e 480 na vertical. O SuperVGA (SVGA) trabalha com valores de 800x600 e 1024x768. Há quem chame de SSVGA as resoluções acima de SVGA, como 1600x1200. Quanto maiores os números, maiores os detalhes da imagem. 2. HTML (HyperText Markup Language) (Linguagem de Formatação de Hipertexto) Originado do casamento dos padrões HyTime (Hypermedia/Time-based Doumnt Structuring Language) e SGML (Standard Generalized Markup Language), o HTML, sigla para HyperText Markup Language (Linguagem de Formatação de Hipertexto), linguagem usada para criar páginas na Web, estabelece como um determinado elemento deve ser visualizado, não sendo, portanto uma linguagem de programação, e sim, uma linguagem de formatação de exibição de textos, através de "comandos" conhecidos como TAGs. Em suma, HTML é empregado para definir as funções dos diferentes elementos das páginas (como textos, fotos ou animações) que serão visualizadas pelo programa de navegação (Browser). HyTime (Hyprmedia/Time-based Document Structuring Language) HyTime (ISO 10744:1992) é o padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks. O padrão HyTime é independente dos padrões e processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertextos padronizados, consistindo de documentos que aplicam os padrões de maneira particular. SGML (Standard Generalized Markup Language) Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações. SGML não é aplicado de maneira padronizada: todos os produtos SGML têm seu próprio sistema para traduzir as etiquetas para um particular formatador de texto. O documento HTML pode ser escrito em qualquer editor de textos, desde que este tenha a capacidade de gravá-lo como código ASCII (American Standard Code for Information Interchange - código utilizado para representar textos quando há computadores envolvidos), isto é, como texto puro, sem formatação ou caracteres de controle. Pode-se usar, portanto, o Notepad do Windows, ou o Edit do MS-DOS. Pode-se também usar editores mais modernos, como o Word, sendo necessário neste caso que o documento seja gravado no formato texto e não como um ".doc" normal do MS-Word. Conjunto de caracteres ASCII LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 16 O conjunto de caracteres de 7 bits do código padrão americano para intercâmbio de informações (ASCII, American Standard Code for Information Interchange) e que é amplamente usado para representar letras e símbolos encontrados em um teclado americano padrão. O conjunto de caracteres ASCII é igual aos 128 primeiros caracteres (0127) do conjunto de caracteres ANSI. Conjunto de caracteres ANSI O conjunto de caracteres de 8 bits do Instituto Nacional de Padronização Americano (ANSI, American National Standards Institute) que é usado pelo Microsoft Windows e que possibilita a representação de até 256 caracteres (0-255) através do teclado. Os 128 primeiros caracteres (0-127) correspondem a letras e símbolos de um teclado americano padrão. Os outros 128 caracteres (128-255) representam caracteres especiais, como letras de alfabetos internacionais, acentos, símbolos monetários e frações. 2.1. TAGs TAGs são os "comandos" do HTML. Um documento HTML é composto de TAGs que farão com que o browser monte a página de acordo com a formatação definida pelo comando HTML. Um TAG é sempre precedido de um caracter "<" (menor que) e seguido por um caracter ">" (maior que). Exemplo de TAG: <HTML> Na maioria dos casos, um TAG deve ter um correspondente, chamado de TAG de fechamento. Ou seja, um TAG indica onde começa sua área de influência, enquanto o seu correspondente TAG de fechamento indica onde termina a área de influência. Um TAG de fechamento tem o mesmo nome do TAG de abertura, precedido do caracter "/". Exemplo de TAG de fechamento: </HTML> TAGs podem ser escritas em minúsculas ou maiúscula, mas nunca podem haver espaços em branco dentro de TAGs, exceto entre atributos e entre aspas. Exemplo : <HTML>, <html>, <HtMl>, <Html>, <hTmL> ... LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 17 2.2. Estrutura Básica A Estrutura Básica de um documento HTML é a seguinte: Exemplo: <html> > Início do Documento <head> > Início do Cabeçalho do Documento <title> > Início do Título do Documento Aqui entra o Título do documento </title> > Fim do Título do Documento </head> > Fim do Cabeçalho do Documento <body> > Início do Conteúdo do Documento Aqui entra todo o conteúdo que será exposto pelo Browser... </body> > Fim do Conteúdo do Documento </html> > Fim do Documento <html> Vamos ver um pouco sobre os elementos básicos do HTML a seguir. 2.2.1. Início e Fim do Documento Os TAGs <HTML> . . . </HTML> indicam respectivamente o início e fim do documento. 2.2.2. Definições Lógicas sobre o Documento Entre os TAGs <HEAD> . . . </HEAD> estão as definições lógicas sobre o documento. Delimitam a seção de cabeçalho do documento. Trata-se da primeira seção do documento. 2.2.3. Título da Página Os TAGs <TITLE> . . . </TITLE> indicam o título do documento, que será apresentado na barra superior do browser. Estas marcas devem constar da seção de cabeçalho. 2.2.4. Conteúdo da Página Entre os TAGs <BODY> . . . </BODY> estão o conteúdo da página que será exposto pelo Browser, incluindo cabeçalho e rodapé. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 20 3.2.1. Elementos presentes em HEAD TITLE <title>...</title> Atributo: Não possui atributos Explicação: Contém o título do documento. Muitos browsers utilizam o título como forma de referenciar a página em uma lista de links úteis criadas pelo usuário (conhecida como "Bookmarks" ou "Favorites"). Além disso, exibem o título como nome da janela em que a página é visualizada. O Título é obrigatório. Não confunda o título da página com o nome do arquivo gravado em disco. Exemplo: <title> Universo Minas </title> SCRIPT <script>...</script> Explicação: É utilizado para inserção de código script (ex.: java Script, VB Script, etc.) dentro do documento HTML. Exemplo: <script> ...código em alguma linguagem script reconhecida pelo browser... </script> META <meta> Explicação: Define valores especiais. os valores são definidos como pares "name/value" (nome/valor). Atributos de META Atributo: NAME Explicação: Especifica um nome ao qual um determinado valor será associado. O browser precisa entender esse nome para que o TAG tenha utilidade. Exemplo: <meta name="keywords" content="INFORMÁTICA, TREINAMENTO, CONSULTORIA"> Atributo: CONTENT Explicação: Especifica o valor associado a um "NAME". Exemplo: <meta name="keywords" content="INFORMÁTICA, TREINAMENTO, CONSULTORIA"> É obrigatório a presença do atributo "NAME" ou do atributo "HTTP-EQUIV". <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 21 O TAG META é utilizado, também, para especificar palavras chaves que serão catalogadas por Ferramentas de Busca. 3.3. BODY <body>...</body> Explicação: Deve englobar toda a parte física do documento, isto é, o que deve ser exibido pelo Browser. Atributos de BODY Atributo: BACKGROUND Explicação: Define uma imagem que será utilizada como "fundo" da página. Caso a imagem tenha um tamanho inferior ao da págima ela será repetida diversas vezes de forma a cobrir o fundo do documento Exemplo: <body background="images/fundo.gif"> ...diversos TAGs, textos etc... </body> Atributo: BGCOLOR Explicação: Define a cor de fundo da página Exemplo: <body bgcolor="white"> Atributo: TEXT Explicação: Define a cor do texto da página Exemplo: <body text="black"> Atributo: LINK Explicação: Define a cor dos links ainda não visitados Exemplo: <body link="blue"> Atributo: VLINK Explicação: Define a cor dos links já visitados nos últimos x dias onde x é um valor definido pelo usuário em seu browser. Exemplo: <body vlink="purple"> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 22 Atributo: ALINK Explicação: Define a cor dos links no instante em que são clicados pelo usuário. Exemplo: <body alink="red"> Exemplo: <body link="blue" vlink="purple" alink="red"> Atributo: BGPROPERTIES (Microsoft Internet Explorer) Explicação: Deve ter o valor "fixed". Indica que o fundo da página é fixo, isto é, não "rola" junto com o conteúdo da página. Exemplo: <body background="images/fundo.gif" bgproperties="fixed"> Atributo: LEFTMARGIN (Microsoft Internet Explorer) Explicação: Especifica uma quantidade de espaço (em pixels) a ser deixada como margem esquerda do documento. Exemplo: <body leftmargin="20"> Atributo: TOPMARGIN (Microsoft Internet Explorer) Explicação: Especifica uma quantidade de espaço (em pixels) a ser deixada como margem superior do documento. Exemplo: <body toptmargin="20"> Exemplo do Elemento BODY com todos os seus Atributos: <html> <head> <title>Universo Minas</title> </head> <body background="images/fundo.gif" link="blue" vlink="purple" alink="red" bgproperties="fixed" bgcolor="white " text="black" topmargin="20" leftmargin="20"> <p><a href="http://www.Universominas.com.br">Oi! Eu sou um link!</a></p> </body> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 25 Através da META TAG “REFRESH”, de gerenciamento de conteúdo final, pode-se redirecionar o Browser automaticamente de uma página para outra, mostrando uma mensagem rápida em uma página, antes de entrar em uma outra página. Atributo: HTTP-EQUIV="REFRESH" Explicação: Gerenciamento de conteúdo final. Redireciona o Browser automaticamente, de uma página para uma outra página. Exemplo: <meta http-equiv="refresh" content="2; URL=http://www.Universominas.com.br/page1.htm"> Esta META TAG é muito útil para mudanças de endereço, levando o usuário automaticamente para o novo endereço. Para informar ao navegador que a partir da page0.htm deve recuperar a page1.htm em cinco segundos, ficaria assim: Exemplo: <html> <head> <meta http-equiv="refresh" content="5; URL=page1.htm"> <title>Título da Page 0 (page0.htm)</title> </head> <body> Corpo do Documento </body> </html> A page0.htm aparecerá ao acessar a sua Home Page com uma mensagem ou efeito, e após 5 segundos, carregará a page1.htm. Outras definições de META TAG incluem informações referentes à versão do HTML, versão do navegador, ferramentas de criação Web e mecanismos de pesquisa. A maioria destas fontes de META TAG adicionais utilizam o atributo NAME, que designa informações suplementares que não têm um cabeçalho HTTP relacionado. Em cada uma destas TAGs, o atributo NAME identifica o valor real, enquanto o atributo CONTENT especifiva um valor associado ao NAME. Atributo: NAME="AUTOR" Explicação: Determina o nome do autor. Exemplo: <meta name="Autor" content="William Sheakspeare"> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 26 Atributo: NAME="COPYRIGHT" Explicação: Define as informações de direitos autorais. Exemplo: <meta name="Copyright" content="1999-2000 Universo Minas Ltda."> Atributo: NAME="GENERATOR" Explicação: Define a ferramenta de criação que gerou a página. Exemplo: <meta name="Generator" content="Microsoft FrontPage 4.0"> Atributo: NAME="REPLY-TO" Explicação: Define o endereço de e-mail para contato. Exemplo: <meta name="Reply-To" content="LUAN@universominas.com.br"> Alguns navegadores e mecanismos de pesquisa podem não ser capazes de interpretar suas META TAGs e simplesmente as ignorarão. A meta informação é sempre adicionada ao cabeçalho da página na área de influência entre as "marcas" <HEAD> e </HEAD> juntamente com as "marcas" <TITLE> e </TITLE>. Exemplo: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <title>Universo Minas</title> </head> <body> Aqui entra todo o conteúdo que será exposto pelo Browser... </body> </html> As classificações do mecanismo de pesquisa ajudam a sondar clientes e rendimentos. Para obter as melhores classificações, utilize as META TAGs. As técnicas de META TAGs que irão trabalhar em seu favor (razoavelmente, é claro) no atributo NAME incluem:"KEYWORDS", "DESCRIPTION" e "ROBOTS" LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 27 Atributo: NAME="KEYWORDS" Explicação: Conjunto de listas de palavras-chave. Exemplo: <meta name="keywords" content="INFORMÁTICA, TREINAMENTO, CONSULTORIA"> Atributo: NAME="DESCRIPTION" Explicação: Conjunto de descrições. Como alguns mecanismos de pesquisa utilizam descrições de páginas menores do que 200 caracteres, tente colocar as informações mais relevantes primeiro. Exemplo: <meta name="description" content="Universo Minas vem prestando Serviços de Desenvolvimento; Manutenção e Implantação de Sistemas; Consultoria; Treinamento e Suporte Técnico, há quase dez anos. No mercado carioca desde o início de 1991, a UNIVERSOMINAS trabalha com as mais importantes empresas públicas e privadas do Brasil."> Atributo: NAME="ROBOTS" Explicação: Conjunto de controles de indexação. Exemplo: <meta name="robots" content="NOINDEX, NOFOLLOW"> Veja os valores de conteúdo (atributo CONTENT) para especificar como a página deve ser indexada: Atributo: CONTENT="ALL" Explicação: Indexa a página a todos os seus vínculos (padrão). Exemplo: content="ALL" Atributo: CONTENT="INDEX" Explicação: Indexa a página. Exemplo: content="INDEX" Atributo: CONTENT="FOLLOW" Explicação: Segue os vínculos. Exemplo: content="FOLLOW" Atributo: CONTENT="NOFOLLOW" Explicação: Não segue os vínculos. Exemplo: content="NOFOLLOW" Segundo a especificação do HTML 4.0, as palavras-chaves relacionadas a índice e os valores de nome "ROBOTS" devem ser determinadas em letra maiúscula. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 30 As formas de representar caracteres especiais, através de uma notação específica, são chamadas de Entidades. Existem “Entidades de Caracter” e “Entidades Numéricas”. Exemplo: Caracter Entidade de Caracter Entidade Numérica Descrição ç ç ç c cedilha (minúsculo) HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um “&” (e (ê) comercial) inicial, “um número ou cadeia de caracteres correspondente ao caracter desejado”, e um “;” (ponto e vírgula) final. Exemplo: Caracter Entidade de Caracter Entidade Numérica Descrição ã ã ã a c/ til Um caracter bastante útil é o espaço não ignorável, o “ ” (Non-breaking space). Este caracter é importante quando desejamos forçar o browser a não ignorar espaços em branco entre palavras. Caracter Entidade de Caracter Entidade Numérica Descrição Non-breaking space   Espaço não ignorável Exemplo: <body> <p>Veja como fica com      espaço não ignorável!</p> </body> Visualização pelo Browser: Veja como fica com espaço não ignorável! LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 31 Os caracteres ASCII “<” (menor que), “>” (maior que), e “&” (e (ê) comercial) tem significados especiais para indicar um comando HTML. Mas por vezes queremos exibir estes símbolos na tela e são usados dentro de documentos seguindo a correspondência: Caracter Entidade de Caracter Entidade Numérica Descrição & & & E(ê) comercial < < < Menor que > > > Maior que Outras seqüências de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com as entidades mais utilizados em Português: Tabela de Caracteres Especiais e Acentuação Caracter Entidade de Caracter Entidade Numérica Descrição 	 Tabulação Horizontal   Espaço não ignorável " " " Aspas À À À A c/ crase Á Á Á A c/ acento agudo Â Â Â A c/ acento circunflexo Ã Ã Ã A c/ til Ç Ç Ç C cedilha (maiúsculo) É É É E c/ acento agudo Ê Ê Ê E c/ acento circunflexo Í Í Í I c/ acento agudo Ó Ó Ó O c/ acento agudo Ô Ô Ô O c/ acento circunflexo Õ Õ Õ O c/ til Ú Ú Ú U c/ acento agudo Ü Ü Ü U c/ trema à à à a c/ crase á á á a c/ acento agudo â â â a c/ acento circunflexo ã ã ã a c/ til ç ç ç c cedilha (minúsculo) é é é e c/ acento agudo ê ê ê e c/ acento circunflexo í í í i c/ acento agudo ñ ñ ñ n c/ til ó ó ó o c/ acento agudo ô ô ô o c/ acento circunflexo ò õ õ o c/ til ú ú ú u c/ acento agudo ü ü ü u c/ trema LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 32 Veja outras entidades numéricas: Tabela de Caracteres Especiais e Acentuação Caracter Entidade de Caracter Entidade Numérica Descrição # # Tralha $ $ Cifrão % % Percente 5.1. Por que usar estas formatações ? Os browsers costumam também mostrar corretamente os caracteres acentuados normalmente. Essa prática, embora facilite sobremaneira a digitação dos documentos, não é recomendada "ainda", devido a um problema relativo a transmissão desses caracteres. Chama-se conjunto de caracteres uma representação digital de texto. Um caracter é um símbolo cujas diversas representações devem significar a mesma coisa para uma comunidade de pessoas. Na prática, porém, existem alguns conjuntos que associam dois números distintos a um mesmo caracter. Os Browser já permitem que se escolha a codificação adequada ao conjunto de caracteres relativo aos documentos a serem recuperados. Mas para garantir a interpretação apropriada de um documento, pode-se inserir uma indicação do esquema de codificação, através do campo: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Na World Wide Web, os acentos da Língua Portuguesa chegam a travar os Browsers de usuários em outros países, que usam um conjunto de caracteres diferentes do ISO Latin 1 – apesar do ISO Latin 1 ser padrão na Web. 6. Cores Através de Valores Hexadecimais As cores são definidas através de um valor hexadecimal de 6 algarismos, ou através de seus nomes. Os nomes padronizados são: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. Estes nomes foram escolhidos por serem os nomes originais das cores suportadas pelas primeiras versões do MS-Windows. Alguns Browsers implementam outros nomes não padronizados. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 35 8. Controles de Formatação 8.1. Títulos / Subtítulos Hn <hn>...</hn> Explicação: Indica que o texto influenciado é uma "HEADER" (cabeçalho). Os cabeçalhos têm seis níveis de importância, sendo o nível "1" o mais importante e o nível "6" o menos. Exemplo: <h1>Este é o cabeçalho de nível 1</h1> <h2>Este é o cabeçalho de nível 2</h2> <h3>Este é o cabeçalho de nível 3</h3> <h4>Este é o cabeçalho de nível 4</h4> <h5>Este é o cabeçalho de nível 5</h5> <h6>Este é o cabeçalho de nível 6</h6> Nota: Veja os níveis de cabeçalho e o equivalente aos tamanhos da fonte. (h1 - 24 pt / h2 - 18 pt / h3 - 14 pt / h4 - 12 pt / h5 - 10 pt / h6 - 8 pt). Visualização pelo Browser: Este é o cabeçalho de nível 1 Este é o cabeçalho de nível 2 Este é o cabeçalho de nível 3 Este é o cabeçalho de nível 4 Este é o cabeçalho de nível 5 Este é o cabeçalho de nível 6 Atributos de Hn Atributo: ALIGN Explicação: Indica se o cabeçalho será alinhado a esquerda (padrão), centralizado ou a direita, usando-se, respectivamente, as palvras "LEFT", "CENTER" e "RIGHT". Exemplo: <h1 align="left">Texto Um</h1> <h2 align="center">Texto Dois</h2> <h3 align="right">Texto Três</h3> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 36 8.2. Controles "Físicos"de Formatação de Texto I <i>...</i> ou EM <em>...</em> Atributo: Não possui atributos Explicação: Indica que o texto deve ser apresentado em itálico. Exemplo: <i>Este texto está em itálico</i> Exemplo: <em>Este texto também está em itálico</em> Visualização pelo Browser: Este texto está em itálico B <b>...</b> ou STRONG <strong>...</strong> Atributo: Não possui atributos Explicação: Indica que o texto deve ser apresentado em negrito. Exemplo: <b>Este texto está em negrito</b> Exemplo: <strong>Este texto também está em negrito</strong> Visualização pelo Browser: Este texto está em negrito U <u>...</u> Atributo: Não possui atributos Explicação: Indica que o texto deve ser apresentado sublinhado. Exemplo: <u>Este texto está sublinhado</u> Visualização pelo Browser: Este texto está sublinhado STRIKE <strike>...</strike> Atributo: Não possui atributos Explicação: Indica que o texto deve ser apresentado com um traço cortando-o. Exemplo: <strike>Este texto está strike !</strike> Visualização pelo Browser: Este texto está strike ! SUB <sub>...</sub> Atributo: Não possui atributos Explicação: Indica que o texto deve ser apresentado em subscrito. Exemplo: <sub>Este texto está subscrito</sub> Visualização pelo Browser: Este texto está subscrito LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 37 SUP <sup>...</sup> Atributo: Não possui atributos Explicação: Indica que o texto deve ser apresentado em sobrescrito. Exemplo: <sup> Este texto está subrescrito </sup> Visualização pelo Browser: Este texto está subrescrito 8.3. Controles de Fontes 8.3.1. FONT <font>...</font> Explicação: Existem 7 tamanhos de fonte em HTML, numeradas de 1 a 7. O tamanho padrão é 3. As cores são definidas através de um valor hexadecimal de 6 algarismos, ou através de seus nomes. Caso o usuário não possua nenhuma das fontes listadas, será usada uma fonte padrão. Usualmente a fonte padrão é a Times New Romam. Exemplo: <font face="Times New Roman" size="5" color="#000000">Texto</font> Atributos de FONT Atributo: SIZE Explicação: Indica qual o tamanho de fonte que deve ser usado dentro de sua área de influência. Exemplo: <font size="5">Texto</font> Atributo: COLOR Explicação: Indica qual a cor da fonte dentro de sua área de influência Exemplo: <font color="#000000">Texto</font> <font color="black">Texto</font> Atributo: FACE Explicação: Determina a fonte (tipo de letra) a ser utilizada. Como valor deve ter uma lista de nomes de fontes separados por vígula. Exemplo: <font face="Times New Roman">Texto</font> Exemplo: <font face="Verdana, Arial, Helvetica">Texto</font> 8.3.2. BASEFONT <basefont> Atributo: SIZE LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 40 8.8. O TAG PRE <pre>...</pre> Atributo: Não possui atributos Explicação: Usualmente o browser ignora os espaços em branco e as quebras de linha existentes no documento fonte, formatando o texto de acordo com o tamanho de sua janela. Com a utilização deste TAG os espaços e as quebras de linha são honrados. O browser exibe o conteúdo de <pre> usando uma fonte diferente da usual. Exemplo: <pre> Esta é a Home Page da Universo Minas. Aqui nos veremos:Treinamento Consultoria Representações Soluções Web </pre> 8.9. O TAG CENTER <center>...</center> Atributo: Não possui atributos Explicação: Centraliza o texto influenciado. o TAG <center> foi criado quando não havia outras formas de se centralizar os elementos na tela. Hoje faz parte da definição do HTML para que seja mantida a compatibilidade com páginas escritas no passado. Exemplo: <center> Esta é a Home Page da Universo Minas. Este texto será centralizado. </center> 8.10. O TAG NOBR <nobr>...</nobr> Explicação: Impede que o texto em sua área de influência seja "quebrado", isto é, dividido em mais de uma linha. Deve-se usar este TAG de forma cuidadosa. Normalmente o usuário não deseja ser obrigado a empregar a "scroll bar" para ler o conteúdo de uma página. Exemplo: <nobr>Este texto ficará na mesma linha ao visualiza-lo no browser.<nobr> Visualização pelo Browser: Este texto ficará na mesma linha ao visualiza-lo no browser. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 41 9. Listas 9.1. Listas Ordenadas OL <ol>...</ol> Explicação: Indica o início e o final de uma lista ordenda (numerada). Exemplo: <ol> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manutenção </li> </ol> Visualização pelo Browser: 1. Treinamento 2. Consultoria 3. Desenvolvimento 4. Manutenção Atributos de OL Atributo: START Explicação: Especifica o número do primeiro elemento da lista. Exemplo: <ol start="10"> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manutenção </li> </ol> Visualização pelo Browser: 10. Treinamento 11. Consultoria 12. Desenvolvimento 13. Manutenção LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 42 Atributo: TYPE Explicação: Define o tipo de numeração empregada na lista. Pode assumir os valores "1 (1, 2, 3, 4, etc) ", "I" (I, II, III, IV, etc), "i" (i, ii, iii, iv, etc), "A" (A,B, ..., Z) ou "a" (a, b, ..., z). Exemplo: <ol type="A"> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manutenção </li> </ol> Visualização pelo Browser: A. Treinamento B. Consultoria C. Desenvolvimento D. Manutenção 9.2. Elementos LI <li>. . . </li> LI <li> Explicação: Demarca os elementos de listas ordenadas e não ordenadas. Exemplo: <ol> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manutenção </li> </ol> Visualização pelo Browser: 1. Treinamento 2. Consultoria 3. Desenvolvimento 4. Manutenção LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 45 9.4. Listas de Definição DL <dl>...</dl> Atributo: Não possui atributos Explicação: Demarca os elementos de listas ordenadas e não ordenadas. Exemplo: <dl> <dt> Treinamento </dt> <dd> É um departamento da Universo Minas. </dd> <dt> Consultoria </dt> <dd> É um outro departamento! </dd> </dl> Visualização pelo Browser: Treinamento É um departamento da Universo Minas. Consultoria É um outro departamento! Nota: São muito úteis para estruturas do tipo "dicionário", onde um termo é citado e então explicado. Na Web é muito utilizada para listas de URLs e seus respectivos comentários. DT <dt> Atributo: Não possui atributos Explicação: Representa o termo definido, a ser explicado em <DD>. Exemplo: <dl> <dt> Treinamento </dt> <dd> É um departamento da Universo Minas. </dd> <dt> Consultoria </dt> <dd> É um outro departamento! </dd> </dl> Visualização pelo Browser: Treinamento É um departamento da Universo Minas. Consultoria É um outro departamento! LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 46 Nota: Não devem conter TAGs referentes a: HEADER, Parágrafo, Listas, Texto Pre-Formatado, Divisão, CENTER, BLOCKQUOTE, Formulário, ISINDEX, Linha Horizontal ou Tabela. DD <dd> Atributo: Não possui atributos Explicação: Representa a definição do termo presente em <DT>. Não deve conter HEADERs. Exemplo: <dl> <dt> Treinamento </dt> <dd> É um departamento da Universo Minas. </dd> <dt> Consultoria </dt> <dd> É um outro departamento! </dd> </dl> Visualização pelo Browser: Treinamento É um departamento da Universo Minas. Consultoria É um outro departamento! LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 47 10. Links Os pontos que ligam os hipertextos são chamados de hyperlinks, links ou âncoras de hipertexto. O TAG que indica a região a ser tratada como um hyperlink é o par <A> e </A> - "A" (anchor). Dentro desse TAG, na forma de atributo, é colocada a referência ao arquivo ligado. A referência indica a URL do documento. Quando o usuário clicar sobre o trecho realçado pela âncora de hipertexto, o arquivo ligado será requisitado ao servidor e mostrado na janela do navegador. Geralmente o Browser apresenta os links em azul e sublinhados, mas como já vimos é possível alterar isso através dos parâmetros opcionais do elemento <BODY>. A <a>...</a> Explicação: Indica a região a ser tratada como hyperlink Exemplo: <a href="http://www.Universominas.com.br">Universo Minas</a> Visualização pelo Browser: Universo Minas Atributos de A Atributo: HREF Explicação: Define que sua área de influência é um link. Exemplo: <p> Clique em <a href="http://www.Universominas.com.br/cursos.htm">Cursos</a> para acessar a página dos Descritivos dos Cursos.</p> Visualização pelo Browser: Clique em Cursos para acessar a página dos Descritivos dos Cursos. Existem quatro formas de se especificar um link: LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 50 Atributo: HEIGHT Explicação: Determina a altura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" height="60"> Atributo: BORDER Explicação: Determina a largura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" border="2"> Atributo: HSPACE Explicação: Determina a quantidade de espaço deixado em branco aos lados da imagem, de forma que ela não fique demasiadamente próxima dos outros elementos da página. Exemplo: <img src="/images/imagem.gif" hspace="10"> Atributo: VSPACE Explicação: Determina a quantidade de espaço deixado em branco acima e abaixo da imagem. Exemplo: <img src="/images/imagem.gif" vspace="10"> Atributo: USEMAP Explicação: Indica que a imagem é um mapa sensitivo interpretado totalmente. Exemplo: <img src="/images/imagem.gif" usemap="#mapalocal"> Atributo: DYNSRC (Microsoft Internet Explorer) Explicação: Determina qual o vídeo ou ambiente VRML será exibido. Pode ser usado em conjunto com SRC. Dessa forma, quando o usuário não possuir suporte a vídeo, verá uma imagem estática em seu lugar. Os vídeos devem estar em formato AVI. Exemplo: <img src="imagemUNIVERSOMINAS.gif" dynsrc="vídeoUNIVERSOMINAS.avi"> Atributo: LOOP (Microsoft Internet Explorer) Explicação: Indica quantas vezes o videoclip será exibido. Se o valor for "-1" ou "infinite" ele será exibido continuamente. <img src="imagemUNIVERSOMINAS.gif" dynsrc="vídeoUNIVERSOMINAS.avi" loop="5"> Atributo: START (Microsoft Internet Explorer) Explicação: Pode assumir os valores "fileopen" (o videoclipe será exibido assim que a página for aberta, o que é o default) ou "mouseover" (o videoclip será exibido quando o cursor toca-lo). <img src="imagemUNIVERSOMINAS.gif" dynsrc="vídeoUNIVERSOMINAS.avi" loop="5" start="mouseover"> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 51 Alguns Browsers, como o Internet Explorer 3 e 4 e o Netscape Comunicator 4, expõe o texto presente no atributo ALT quando o cursor toca a imagem. O texto è exibido em "balões de texto" ou similares. Os atributos WIDTH e HEIGHT são extremamente importantes. Os browsers, tendo informações sobre a altura e a largura das imagens, não precisam esperar que elas cheguem por inteiro para continuar a exibição do resto do documento. Além disto, WIDTH e HEIGHT podem ser usados para distorcer imagens. Pode-se usar o atributo BORDER para se retirar a borda de um link (quando é claro, este for uma imagem). No entanto, deve-se tomar cuidado para não confundir o usuário, pois este poderá não perceber que a imagem é também um link. 12. Formatos de Imagens GIF (Graphics Interchange Format) e JPEG (Joint Photographic Experts Group) são os dois formatos gráficos padrões usados na Internet, cada formato tem suas vantagens e desvantagens, como analisado a seguir. Os dois formatos de imagens são bastante utilizados, mas possuem características diferentes. 12.1. Usando o GIF (Graphics Interchange Format) O GIF apresenta um bom rendimento no tamanho e qualidade em imagens com cores "limpas", sem muito detalhes. Possui suporte para imagens animadas e com partes "transparentes". • Trabalha com cores indexadas, podendo representar um máximo de 256 cores. • Armazena imagens com grandes áreas planas (da mesma cor) de forma bastante eficiente. • Não possui níveis de compreenssão, apesar de já ser naturalmente compactado (GIFs tem uma compressão padrão). • Podem ser entrelaçadas. Uma imagem entrelaçada (interlaced) pode ser vista à medida que vai sendo carregada (melhorando a definição aos poucos). • Pode-se definir uma das cores como sendo "transparente", permitindo que se veja o que está por trás. O recurso de transparência é muito interessante, pois permite criar a sensação de que as imagens não são todas retangulares. • Permite a criação de animações (GIFs Animados). O Princípio do GIF Animado é o mesmo de um filme que vemos no cinema, ou seja uma sequência de imagens transmitida rapidamente, uma animação propriamente dita. Os anúncios (chamados de banners) que se vê na Web, na verdade são, GIFs Animados. 12.2. Usando o JPEG (Joint Photographic Experts Group) LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 52 O JPEG é melhor para imagens que apresentam muitos tons de cor. Este formato é ideal para trabalhar com fotografias digitais e imagens complexas. • Pode representar imagens com até 16 milhões de cores. • Armazena imagens complexas de forma eficiente. • Tem uma compressão variável. Porém, como nem tudo é perfeito, quanto mais você comprime, maior será a perda da qualidade. A compressão padrão é em torno de 33 (numa escala de 1 a 100), mas a ideal, só testando mesmo. Quanto maior o número, pior fica a qualidade. • Não possui o recurso de transparência, portanto sempre aparecem retangulares na tela. • O entrelaçamento pode ser conseguido utilizando o formato Progressive Rendered JPEG, uma nova versão criada para possibilitar um carregamento igual ao de um GIF entrelaçado. Os Browsers de última geração já entendem este formato numa boa, mas não os antigos. • Não permite a criação de animações. 12.3. Sobre o PNG (Portable Networ Graphics) Um formato novo, ainda não muito comum na Internet, é o PNG (Portable Network Graphics), desenvolvido por um grupo formado especialmente com este fim. Ele é uma evolução das GIFs que conhecemos, mantendo diversas de suas características e incorporando novas com pouco custo de implementacão aos desenvolvedores. Suporta cores TRUECOLOR (48 bits por pixel), interlaçamento, transparência, etc. Foi desenvolvido para, no futuro, substituir o GIF e o JPEG. Nota: PNG é pronunciado "ping". 12.4. Imagens no Browser Uma imagem GIF pode conter até 256 cores. Para isso, são necessários 8 bits para cada pixel da imagem. Se a sua imagem tem 128 ou 64 cores, significa que cada pixel vai precisar de 7 ou 6 bits respectivamente. E ainda, se a sua imagem tem somente 16 cores ela requer somente 4 bits por pixel, reduzindo em 50% o tamanho do arquivo quando comparado com o de 256 cores. Da mesma forma que no GIF, existem ajustes finos possíveis no JPEG. Neste formato, o tamanho do arquivo depende da qualidade que você pode optar para a sua imagem. Além disso, alguns softwares permitem que você configure a resolução da imagem . A maioria das imagens é salva com a resolução de 300 dpi (pontos por polegada). Porém como a resolução da maioria dos monitores (padrão SVGA) de computador é de 96 dpi, pode-se sempre diminuir para este valor. Experimente fazer alguns testes com os dois formatos, variando o número de cores, compressão e resolução. Ferramentas Gráficas e GIFs Animados LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 55 O Mapa Sensitivo será descrito através do TAG <MAP>. O nome da descrição será "mapa1". Exemplo: <map name="mapa1"> Esta imagem não funcionará como um Mapa Sensitivo em browsers antigos, pois estes ignorarão o atributo "USEMAP". 13.2. Descrição Uma imagem com 600 Pixels de Largura e 60 Pixels de Altura será dividida em dois blocos para serem feitos links para duas páginas distintas. Exemplo: <html> <head> <title>Universo Minas</title> </head> <body> <img src="imagem.gif" width="600" height="60" alt="imagem.gif" border="0" usemap="#mapa1"> <map name="mapa1"> <area shape="rect" coords="300,2,600,60" href="http//www.Universominas.com.br/treinamento.htm"> <area shape="rect" coords="0,0,300,60" href="http://www.Universominas.com.br/consultoria.htm"> </map> </body> </html> Foi criado um Mapa Sensitivo interpretado localmente. Para isso, o TAG <IMG> foi utilizado na definição da imagem e do respectivo mapa. Em seguida, o mapa é definido, através dos TAGs <MAP> e <AREA>. Exemplo feito com a ajuda de um Editor de HTML: Link para http://www.touch.com.br/ consultoria.htm Link para http://www.touch.com.br/ treinamento.htm LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 56 <html> <head> <title>Universo Minas</title> </head> <body> <p></p> </body> </html> 15. Tabelas Assim como as listas, no HTML existem elementos específicos para a criação e formatação de tabelas. O recurso de tabelas é muito interessante e muito usado nas páginas Web. O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseção delas estão as células. Na linguagem HTML você pode inserir nas células tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e até outras tabelas. TABLE <table>...</table> Explicação: Indica o início e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluidas entre <table> e </table>. <table> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table> Atributos de TABLE Atributo: BORDER Explicação: Se presente, a tabela apresenta bordas. Se for atributo o valor 0 (zero), não somente a tabela não apresentará bordas, como o espaço usualmente reservado para bordas será liberado, permitindo a confecção de tabelas mais compactas. Exemplo: <table border="4"> Atributo: CELLSPACING LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 57 Explicação: Indica quanto espaço, em pixels, deve ser inserido entre as células da tabela. Exemplo: <table cellspacing="10"> Atributo: CELLPADDING Explicação: Indica quanto espaço, em pixels, deve ser inserido entre as bordas das células e seu conteúdo. Exemplo: <table cellpadding="5"> Atributo: WIDTH Explicação: Indica a largura da tabela. Usa-se como medida o número de pixels desejado ou uma porcentagem da largura do documento. Exemplo: <table width="300"> Atributo: ALIGN Explicação: Indica a posição da tabela no documento. Pode assumir os valores "LEFT" ou "RIGHT", indicando, respectivamente, que a tabela deve estar a esquerda ou a direita do documento, e com o texto "fluindo" à sua volta. Exemplo: <table align="center"> Atributo: BACKGROUND Explicação: Especifica uma imagem que será utilizada como "background" da tabela. A imagem será "TILED", isto é, repetida de forma a cobrir todo o fundo da tabela. Exemplo: <table border background="imagem.gif"> Atributo: BGCOLOR Explicação: Especifica uma cor de fundo para a tabela. Exemplo: <table border bgcolor="yellow"> Atributo: BORDERCOLOR Explicação: Especifica uma cor para as bordas da tabela. Exemplo: <table border bgcolor="yellow" bordercolor="blue"> Atributo: BORDERCOLORLIGHT Explicação: Especifica uma das cores utilizadas para desenhar a borda com efeito tridimensional da tabela. Exemplo: <table border bgcolor="yellow" bordercolorlight="blue"> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 60 Atributo: WIDTH Explicação: Define a largura da célula. Pode ser expressa em pixels ou como uma porcentagem da largura total da tabela. Exemplo: <table> <tr> <td width="30%">Texto A</td> <td width="70%">Texto B</td> </tr> </table> Atributo: COLSPAN Explicação: Indica quantas "células de largura" (colunas) a respectiva célula deve ocupar. Exemplo: <table> <tr> <td colspan="2">Texto A</td> </tr> <tr> <td>Texto B</td> </tr> </table> Atributo: ROWSPAN Explicação: Indica quantas "células de altura" (linhas) a respectiva célula deve ocupar. Exemplo: <table> <tr> <td rowspan="2">Texto A</td> <td>Texto B</td> </tr> <tr> <td>Texto C</td> </tr> </table> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 61 Atributo: BACKGROUND Explicação: Define uma imagem como fundo de uma célula. Exemplo: <table> <tr> <td background="file:///c:\seta.gif">Texto A</td> <td>Texto B</td> <td>Texto C</td> </tr> </table> Atributo: BGCOLOR Explicação: Define a cor de fundo de uma determinada célula. Exemplo: <table> <tr> <td bgcolor="yellow">Texto A</td> <td>Texto B</td> <td>Texto C</td> </tr> </table> TH <th>...</th> Explicação: Indica um elemento da tabela. A única diferença para "TD" é que o elemento é identificado como "HEADER" (cabeçalho) da tabela. Exemplo: <table> <tr> <th>Texto A</th> </tr> </table> Atributos de TH Explicação: Define se o conteúdo da célula estará alinhado a esquerda ("LEFT"), centralizado ("CENTER") ou a direita ("RIGHT"). Se omitido, o alinhamento fica centralizado. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 62 Exemplo: <table> <tr> <th align="ceter">Texto A</th> <th>Texto B</th> </tr> </table> Atributo: VALIGN Explicação: Define se o conteúdo da célula estará alinhado com seu topo ("TOP"), centralizado ("MIDDLE") ou com sua base ("BOTTOM"). Se omitido o alinhamento fica ao meio. Exemplo: <table> <tr> <th valign="middle">Texto A</th> <th>Texto B</th> </tr> </table> Atributo: WIDTH Explicação: Define a largura da célula. Pode ser expressa em pixels ou como uma porcentagem da largura total da tabela. Exemplo: <table> <tr> <th width="30%">Texto A</th> <th width="70%">Texto B</th> </tr> </table> Atributo: COLSPAN Explicação: Indica quantas "células de largura" (colunas) a respectiva célula deve ocupar. Exemplo: <table> <tr> <th colspan="2">Texto A</th> </tr> <tr> <th>Texto B</th> </tr> </table> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 65 <spacer type="block" widht="60" height="60" align="left">Participamos ativamente da evolução tecnológica do mercado de telecomunicações, representando produtos inovadores como servidores CTI CallXpress, servidores de fax RightFAX e placas inteligentes de fax da Brooktrout, que facilitam a comunicação da sua empresa. 16. Marquee (Microsoft Internet Explorer) MARQUEE <marquee>...</marquee> Explicação: O texto ou figura presente na área de influência deixa de ser estático e passa a percorrer horizontalmente a janela do browser (ou sua frame). Exemplo: <marquee> Universo Minas presta Serviços de Desenvolvimento; Manutenção e Implantação de Sistemas; Consultoria; Treinamento; Suporte Técnico e Soluções Web. </marquee> Atributos de MARQUEE Atributo: ALIGN Explicação: Pode assumir os valores "TOP", "MIDDLE" e "DOWN". Define o comportamento da "MARQUEE" em relação ao texto a seu lado. Exemplo: <marquee align="top"> Atributo: BEHAVIOR Explicação: Indica o comportamento da "MARQUEE". Pode assumir os valores "SCROLL" (default), "SLIDE" e "ALTERNATE". Exemplo: <marquee behavior="alternate"> Atributo: DIRECTION Explicação: Define para que direção a "MARQUEE" deve correr. Pode assumir os valores "LEFT" (default) e "RIGHT". Exemplo: <marquee direction="right"> Atributo: LOOP Explicação: Especifiva o número de rotações que a "MARQUEE" deve executar. Os valores "INFINITE" e "-1" indicam um número infinito. Exemplo: <marquee loop="5"> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 66 Atributo: SCROLLAMOUNT Explicação: Indica o número de pixels de deslocamento do texto entre cada quadro de animação da "MARQUEE". Exemplo: <marquee scrollamount="15"> Atributo: SCROLLDELAY Explicação: Indica o número de milisegundos transcorridos entre cada quadro de animação da "MARQUEE". Exemplo: <marquee scrolldelay="10"> Atributo: WIDTH Explicação: Indica a largura do efeito "MARQUEE". Pode ser expressa em pixels ou porcentagem da janela. Exemplo: <marquee width="50%"> Atributo: HEIGHT Explicação: Indica a altura do efeito "MARQUEE". Pode ser expressa em pixels ou porcentagem da janela. Exemplo: <marquee height="30"> Atributo: BGCOLOR Explicação: Indica a cor de fundo da "MARQUEE". Cria um efeito de "tarja". Exemplo: <marquee bgcolor="yellow"> Atributo: HSPACE Explicação: Especifica a quantidade de espaço deixado em branco aos lados da "MARQUEE". Exemplo: <marquee hspace="20"> Atributo: VSPACE Explicação: Especifica a quantidade de espaço deixado em branco acima e abixo da "MARQUEE". Exemplo: <marquee vspace="30"> 17. Formulários Formulários são de grande utilidade para a Web, pois permitem a interatividade entre o usuário, a pessoa que visualiza as páginas e o Servidor Web. Assim, através da Web, se pode ler e gravar LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 67 informações em Banco de Dados, gerando enormes possibilidades de uso para a Internet, como por exemplo a de um serviço de venda. Formulários também podem ser gerados para a navegação entre páginas e Sites na Web. Nota: GET Indica como os dados serão passados pelo script. POST Envia os dados para entrada padrão do sistema operacional FORM <form>...</form> Explicação: Indica a existência de um formulário, isto é, um local da página utilizado pelo usuário para enviar informações para um local predeterminado (usualmente um Script CGI). Exemplo: <form method="POST" action="http://www.Universominas.com.br/cgi-bin/script"> <p><input type="text" name="T1" size="20"> <input type="submit" value="Submit" name="B1"> <input type="reset" value="Reset" name="B2"></p> </form> O contorno pontilhado define a área do FORM Atributos de FORM Atributo: ACTION Explicação: Indica a localização (URL) do script que irá receber e interpretar os dados enviados pelo formulário. Exemplo: <form method="POST" action="http://www.Universominas.com.br/cgi-bin/script"> Atributo: METHOD Explicação: Indica o formato no qual os dados serão enviados. Pode assumir os valores "GET" (indica como os dados serão passados pelo script) ou "POST" (envia os dados para entrada padrão do sistema operacional). <form method="POST" action="http://www.Universominas.com.br/cgi-bin/script"> INPUT <input> Explicação: Indica um objeto (campo texto, checkbox, etc). Exemplo: <input type="text" size="30"> Atributos de INPUT Atributo: TYPE LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 70 Explicação: Define o valor da opção, que será enviado ao script correspondente caso esta seja selecionada. Atributo: SELECTED Explicação: Define que a opção será selecionada como default. 17.1. Envio de Arquivos A definição do formulário deve conter o atributo ENCTYPE="multopart/form-data", e o METHOD deve assumir, obrigatoriamente, o tipo "POST". <form enctype="multipart/form-data" action="_URL_" method="POST"> A implementação do campo onde será indicado qual o arquivo para UPLOAD (envio) é feita através do TAG: <form enctype="file" name="NomeQualquer" size="xx"> A sintaxe do formulário não sofre outras alterações. 17.2. FORM FIELD - Exemplos 17.2.1. One-Line Text Box Exemplo: <form method="POST" action="_URL_"> <input type="text" name="T1" size="20"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"> </form> 17.2.2. Scolling Text Box Exemplo: <form method="POST" action="_URL_"> <textarea rows="2" name="S1" cols="20"></textarea><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"> </form> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 71 17.2.3. Check Box Exemplo: <form method="POST" action="_URL_"> <input type="checkbox" name="C1" value="ON">Tópico 1<input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"> </form> Exemplo com CHECKED: <form method="POST" action="--WEBBOT-SELF--"> <input type="checkbox" name="C1" value="ON" checked><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"> </form> 17.2.4. Radio Button Exemplo: <form method="POST" action="_URL_"> <input type="radio" value="V1" checked name="R1">Tópico 1<input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"> </form> 17.2.5. Drop-Down Menu Exemplo: <form method="POST" action="_URL_"> <select name="D1" size="1"> <option selected value="http://www.Universominas.com.br/topico1">Tópico 1</option> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 72 <option value="http://www.Universominas.com.br/topico1">Tópico 2</option> </select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"> </form> 17.2.6. Push Button Exemplo: <form method="POST" action="_URL_"> <input type="button" value="Button" name="B1"> </form> Exercício de Formulário Todas as informações fornecidas em um formulário são agrupadas e enviadas para um programa, mais conhecido como Script CGI, que é escrito especialmente para processar esses dados de acordo com alguma necessidade ou especificação. Atualização ou consulta a base de dados, envio de dados por e-mail, ou simplesmente a construção de uma nova página (gerada a partir dos novos dados) são algumas das aplicações mais comuns. Escrever um Script CGI não é tarefa fácil para a maioria dos WebDesigners, mas existem vários CGI "pré-fabricados" disponíveis gratuitamente na Rede, que processam as informações fornecidas de forma transparente. Como exercício proposto vamos utilizar o AnyForm para ensinar como colocar um formulário em uma página HTML. <html> <head> <title>Formulário</title> </head> <body> <p><font face="Verdana, Arial, Helvetica" size="2" color="blue"><b>Deixe aqui seus comentários!</b></font></p> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 75 Atributo: LOOP Explicação: Indica quantas vezes o som será repetido. O valor "default" é "1". Os valores "INFINITE" e "-1" indicam que o som deve ser repetido indefinidamente. Tenha cuidado ao inserir arquivos de áudio nas páginas. Avalie bem seus tamanhos e respectivos tempos de download. 18.2. Controles de Som no Netscape Navigator Diferentemente do Explorer, o Netscape não vem com controles nativos de som, mas tem a capacidade de tocar diferentes tipos de sons através do plug-in LiveAudio, que vem normalmente incorporado ao software Netscape a partir da sua versão 3 e suporta os tipos de som mais populares, como wave, midi e au. Como este plug-in já vem incorporado ao Netscape Navigator, pode ser usado tranquilamente, pois todos os usuários deste browser o terão instalado. 19. Frames 19.1. Definição Até a chegada do Netscape 2.0, e com ele a implementação do NHTML, uma página era composta de uma janela, sem divisões. Através do framing, um recursos poderoso, a janela de um browser pode ser dividida em diversas partes. Cada uma dessas partes é chamada de frame. Cada uma dessas frames pode ser manipulada separadamente. Cada frame pode conter um documento diferente. Além disso, uma frame pode "ordenar" ao browser para que este atualize, com a URL indicada, uma frame diferente. Como todos os recursos mais avançados para a construção de Home Pages, também os frames devem ser utilizados com o máximo de cuidado. Sua utilização deve obedecer ao critério de necessidade, para não prejudicar o designe a navegabilidade da página. Os casos de real necessidade de frames não são tantos, mas quando surgem, as frames podem melhorar dramaticamente o site. Casos de índices e tutoriais são alguns dos mais comuns em que o uso de frames é mais indicado. Exatamente para efeitos de design, pode-se alterar as diversas características de frames através de recursos como omissão de barra de rolagem e borda. 19.2. Documentos de Layout e Documentos de Conteúdo Com a definição de frames, os documentos escritos em HTML ( extensão. html ou htm) podem ser de dois tipos: LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 76 1. Documentos de Layout 2. Documentos de Conteúdo 19.2.1. Documentos de Layout Documentos de layout contém informações sobre a estrutura de frames dos documentos. Cada frame declarada em documento de layout contém uma referência implícita ou explícita para outro documento que será exibido no frame. Esse "documento filho" será exibido independentemente da existênciade outras frames na janela do browser. O "documento filho" pode ser um documento de conteúdo ou mesmo outro documento de layout encadeado. 19.2.2. Documentos de Conteúdo Documentos de conteúdo são documentos normais em HTML. Um documento de conteúdo pode ser visto em um frame ( de um documento de layout) ou sozinho, na janela do browser. 19.3. TAGs e Atributos Básicos O TAG <FRAMESET> substitui o TAG <BODY> em um documento de layout. Ele define a divisão da janela em duas ou mais linhas ou em duas ou mais colunas. Podem haver vàrios TAGs <FRAMESET> encadeados, fazendo-se, desta maneira, divisões das divisões da página. Assim como o <BODY>, o TAG <FRAMESET> precisa ser fechado contém todas as informações sobre cada uma das subdivisões da janela, sobre cada uma das frames. FRAMESET <frameset>...</frameset> Explicação: Contém os elementos "FRAME", "NOFRAMES" e outros "FRAMESETs" que podem ser aninhados para que se tenha uma divisões dentro de uma divisão de layout. Exemplo: <frameset scrolling="yes" cols="25%,50%,*"> <frame src="contents.htm"> <frame src="info.htm"> <frameset scrolling="no" src="grafic.htm"> </frameset> Atributos do FRAMESET Atributo: COLS Explicação: Divide a janela (ou frame) em diversas frames verticais, tantas quantas forem os valores descritos. Os valores podem estar expressos em pixels, percentuais ou relativamente uns aos outros. Exemplo: LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 77 <frameset cols="*,2*"> Exemplo: <frameset cols="50,100"> Atributo: FRAMEBORDER Explicação: Indica se será exibida uma borda 3D para as frames, ou se as frames não aparecerão destacadas por uma borda. O parâmetro pode assumir os valores "1" (default, indica a exibição da borda) ou "0" (suprime a exibição de borda). Exemplo: <frameset cols="*,2*" frameborder="1"> Exemplo: <frameset cols="50,100" frameborder="0"> Atributo: FRAMESPACING Explicação: Cria um espaço adicional, em pixels, entre as frames. Exemplo: <frameset cols="*,2*" framespacing="10"> Atributo: ROWS Explicação: Divide a janela (ou frame) em diversas frames horizontais, tantas quantos forem os valores descritos. Os valores podem estar expressos em pixels, percentuais ou relativamente uns aos outros. Exemplo: <frameset rows="*,2*"> Os atributos "FRAMESPACING" e "FRAMEBORDER" funcionam igualmente por toda a cadeia de "FRAMESETs" encadeados, bastando que sejam declarados no primeiro comando "FRAMESET" a ser utilizado. A definição de frames através de percentuais é interessante, pois a diagramação da janela é preservada, não importando a resolução em que se estiver visualizando a página. FRAME <frame> Explicação: Define o conteúdo de cada frame do documento. Exemplo: <frame src="page1.htm"> Atributos de FRAME Atributo: SRC Explicação: Associa uma URL à frame. Exemplo: <frame src="page1.htm"> LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 80 Exemplo (Documento de Layout): <html> <head> <title>Universo Minas</title> </head> <frameset rows="*,*"> <frame src="page1.htm"> <frameset cols="30%,70%"> <frame src="page2.htm"> <frame src="page3.htm"> </frameset> </frameset> </html> Exemplo (Documento de Layout - page3.htm): <html> <head> <title>Universo Minas</title> </head> <frameset rows="*,2*"> <frame src="page4.htm"> <frameset cols="40%,60%"> <frame src="page5.htm"> <frame src="page6.htm"> </frameset> </frameset> </html> O documento de layout estabelece a divisão da janela em 3 frames. Duas dessas frames contém os documentos de conteúdo page1.htm e page2.htm. A terceira frame contém o documento de layout page3.htm, que a subdivide em 3 sub-frames. 19.5. Links em Frame Alvo Quando o usuário pressiona um link qualquer em uma frame, o link pode atualizar sua própria frame com o documento contido em sua URL, ou atualizar outra frame. Para que seja possível a atualização de outras frames, foi introduzido o atributo "TARGET" no TAG <A>. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 81 Exemplo (Documento de Layout): <html> <head> <title>Universo Minas</title> </head> <frameset rows="*,*"> <frame src="page1.htm" name="pagina1"> <frameset cols="30%,70%"> <frame src="page2.htm"> <frame src="page3.htm"> </frameset> </frameset> </html> Exemplo (Documento de Layout - page2.htm): <html> <head> <title>Universo Minas</title> </head> <body> <a href="html1.htm" target="pagina1"> Clicando neste Link, a Frame "pagina1"será atualizada com o arquivo "html1.htm".</a> </body> </html> O link contido do documento "page2.htm" tem como alvo a frame chamada de "pagina1", isto é, quando "clicado", não irá atualizar a própria frame, mas a "frame alvo" . O atributo "TARGET" pode ter o nome de uma frame ou uma dentre as seguinte palavras: _self (atualiza a própria frame) _parent (atualiza a "frame-mãe") _top (atualiza toda a janela, independente de qualquer frame - ex.: link externo) _blank ou _window (abre uma nova janela de browser) "_self", "_parent" e "_top" são case-sensitive, e devem ser escritos em minúsculas. LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 82 20. SSI (Server Side Include) Comentário no código HTML que insere automaticamente texto nas páginas quando elas são buscadas por um navegador da Web. As páginas que contêm SSI recebem extensões ".SHL", ".STM", ".SHTM" ou ".SHTML". 20.1. Criando Páginas Dinâmicas com SSI (Server Side Include) Como criar nos Sites páginas que estão sempre mudando, sem que ninguém precise alterá-las? Muitos Sites na Web exibem, em páginas fixas, barras ou quadros com conteúdo varável. 1. Crie uma página HTML coloque um texto, uma imagem - o que desejar. 2. Salve a parte que desejar da página, recortando-a e colondo-a num editor de texto - o Bloco de Notas por exemplo. Denomine este arquivo de "texto.txt". 3. No lugar do trecho retirado, do documento HTML, inclua as três linhas seguintes: Exemplo:    A primeira e última linhas são apenas comentários. Servem para você saber que ali entrará o conteúdo do arquivo "texto.txt". A linha do meio contém a chamada para o serviço SSI. Entre o sinal de exclamação e o item #include coloque exatamente dois hifens ("--"). Exemplo:  Em lugar de escrever apenas "texto.txt", indique o diretório onde se encontra o arquivo. Exemplo: <html> <head> <title>Universo Minas</title> </head> <body>    LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 85 Existe, porém uma série de editores HTML que podem facilitar em muito o trabalho de desenvolvimento de Home Pages. Dentre estes, podemos citar o vários como opções para soluções que se adequem a necessidade de cada um. Programas para Criação e Edição de Sites HotDog WebMaster Suite 5.5 http://www.sausage.com GoLive 5.0 http://www.adobe.com HotMetal Pro 5.0 http://www.softquad.com FrontPage 2000 http://www.microsoft.com/brasil HomeSite 4.0 http://www.allaire.com DreamWeaver 4.0 http://www.macromedia.com.br 25. WebMails Para trocar e-mail você não precisa ter uma conta no provedor. Na realidade, nem menos precisa ter um computador. É só usar o do vizinho, de algum amigo ou de um cybercafé no meio do Oceano Pacífico. Muito usado como endereço alternativo, por quem quer anonimato ou esteja viajando, os webmails são gratuitos. É só entrar em algum dos serviços abaixo e criar um ou vários endereços. WebMails HotMail http://www.hotmail.com ZipMail http://www.zipmail.com Yahoo Mail http://mail.yahoo.com.br BOL http://www.bol.com.br 26. Definições 26.1. Programas CGI (Commom Gateway Interface) Scripts que obedecem a uma especificação (a Commom Gateway Interface, CGI) para troca de dados com servidores Web. Podem ser escritos em diferentes linguagens de programação, entre elas C, Perl, Java, Visual Basic e Delphi. Os formulários HTML, por exemplo, usam programas CGI para processar as informações quando o usuário clica no botão "Enviar". Outra forma de dar retorno dinâmico à ação do internauta é rodar scripts ou programas na máquina dele. 26.2. Client Side Literalmente: "no lado do cliente". Refere-se a programas que rodam no micro do usuário, e não num servidor Web. Esses programas podem ser Applets Java, Scripts Java ou Controles ActiveX. Contrapõem-se aos programas CGI, que são do tipo Server Side (executados no servidor). LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 86 26.3. ASP (Active Server Pages) Padrão para páginas Web criadas dinamicamente com base em código JScript ou Visual Basic. Quando o Browser solicita uma página ASP, o Servidor monta-a na hora e apresenta-a ao Browser. Nesse aspecto, ASP e CGI são similares. 26.4. PHP (Personal Home Page) Linguagem de Scripts usada para criar páginas Web dinâmicas. Assim como os Scripts em Perl, os programas PHP são embutidos em TAGs HTML e executados no Servidor. A força do PHP está em sua compatibilidade com muitos Banco de Dados. 26.5. Criptografia Processo de embaralhamento de dados, para evitar que pessoas não-autorizadas leiam as informações. 26.6. Plug-In Software que é aclopado ao browser para ampliar suas funções. Os plug-ins servem para permitir a apresentação de imagens, sons ou desenhos tridimensionais, entre outras aplicações. Plug-ins Windows MediaPlayer http://www.microsoft.com/windows/mediaplayer/download RealPlayer G2 http://www.real.com/g2/products/player/index.html Acrobat http://www.adobe.com/prodindex/acrobat/readstep/html Alexa http://www.alexa.com/download/index.html QuickTime http://www.apple.com/quicktime/download 26.7. Applet Programa escrito para rodar dentro de outro programa (por exemplo, macros do Word ou do Excel). Um applet não pode ser executado de forma autônoma. Os Applets escritos em Java, responsáveis por boa parte da dinâmica da Web, em geral rodam no ambiente do Browser. 26.8. Servlet Applet que roda num servidor. Em geral, o termo se refere a um Applet Java que é executado num servidor Web. Esse tipo de programa tem-se tornado comum como substituição aos programas CGI LINGUAGEM DE PROGRAMAÇÃO HTML < P r o f. L u a n M o n t e i r o - luanmonteiromeira@gmail.com > < w w w . u n i v e r s o m i n a s . c o m . b r > 87 26.9. Cookie Mensagem enviada ao Browser pelo servidor Web. Gravada no micro do usuário, ela é lida e devolvida ao servidor quando o Browser solicita uma página. O objetivo básico do Cookie é identificar o usuário, a fim de apresentar páginas personalizadas. 26.10. Download Cópia de arquivos de um computador qualquer para o micro do usuário. Quando você transfere um arquivo de algum lugar para o seu computador, você está fazendo um download. Gerenciadores de Download Cath-Up http://www.manageable.com/download.html Getright http://www.siliconaction.com.br / http://www.getright.com/get.html Go!Zilla http://www.gizmo.net/gozilla Windownload http://mason.gmu.edu/~rmcclana/windownload.html Mr. Cool http://www.cix.co.uk/~net-services/mrcool/welcome.htm Download Wonder http://www.forty.com 26.11. Upload Transferência de arquivos do micro do usuário para um computador qualquer. Quando você transfere um arquivo do seu computador para algum lugar, você esta fazendo um upload. Gerenciadores de Upload Internet Neighborhood http://www.tucows.com CuteFTP http://www. 26.12. RGB Iniciais, em inglês, das cores vermelho, verde e azul. O RGB é um modelo de cores baseado nessas três tonalidades básicas e utilizado como padrão nos monitores de vídeo. Um dos problemas mais difíceis da editoração eletrônica é obter a correspondência das cores RGB com as cores CMYK. 26.13. CMYK Abreviatura das cores básicas: ciano, magenta, amarelo (yellow) e preto (black). Representa um sistema que obtém as tonalidades a partir da mistura dessas quatro cores.