Professional Documents
Culture Documents
1. Introduo ___________________________ 8
1.1. Internet _____________________________________________________________ 8 1.2. Intranet _____________________________________________________________ 8 1.3. WWW (World Wide Web) _____________________________________________ 9 1.4. Web ________________________________________________________________ 9 1.5. Hipertexto __________________________________________________________ 10 1.6. Links ou Hyperlinks__________________________________________________ 10 1.7. Home Page__________________________________________________________ 10 1.8. Site ________________________________________________________________ 11 1.9. Browsers (Navegadores da Web) _______________________________________ 11 1.10. Protocolo __________________________________________________________ 12 1.11. Protocolo HTTP (HyperText Transfer Protocol) _________________________ 12 1.12. Protocolo FTP (File Transfer Protocol) _________________________________ 12 1.12.1. FTP Annimo ___________________________________________________ 13 1.13. URL (Uniform Resource Locator) _____________________________________ 13 1.13.1. URL Absoluto ___________________________________________________ 14 1.13.2. URL Relativo ___________________________________________________ 14 1.13.3. Endereo _______________________________________________________ 14 1.13.4. Entendendo uma URL _____________________________________________ 15 1.14. ISP (Internet Service Provider)________________________________________ 16 1.14.1. Provedores ______________________________________________________ 16 1.14.2. Seu Site na Grande Rede ___________________________________________ 16 1.14.3. Login __________________________________________________________ 16 1.15. Resoluo__________________________________________________________ 17
9. Listas ______________________________ 43
9.1. Listas Ordenadas ____________________________________________________ 43 9.2. Elementos LI <li>. . . </li> _____________________________________________ 44 9.3. Listas No Ordenadas ________________________________________________ 46 9.4. Listas de Definio ___________________________________________________ 47
14. Tabelas ___________________________ 15. Espaamento (Netscape Navigator) ____ 16. Marquee (Microsoft Internet Explorer) __ 17. Formulrios ________________________
57 65 66 68
17.1. Envio de Arquivos __________________________________________________ 71 17.2. FORM FIELD - Exemplos____________________________________________ 71 17.2.1. One-Line Text Box _______________________________________________ 72 17.2.2. Scolling Text Box ________________________________________________ 72 17.2.3. Check Box ______________________________________________________ 72 17.2.4. Radio Button ____________________________________________________ 73 17.2.5. Drop-Down Menu ________________________________________________ 73 17.2.6. Push Button _____________________________________________________ 73
22. DHTML (HTML Dinmico)_____________ 23. XML (Extensible Markup Language) ____ 24. Editores de HTML ___________________ 25. WebMails __________________________ 26. Definies _________________________
85 85 86 86 86
26.1. Programas CGI (Commom Gateway Interface) __________________________ 86 26.2. Client Side _________________________________________________________ 86 26.3. ASP (Active Server Pages)____________________________________________ 87 26.4. PHP (Personal Home Page) ___________________________________________ 87 26.5. Criptografia _______________________________________________________ 87 26.6. Plug-In ____________________________________________________________ 87 26.7. Applet ____________________________________________________________ 87 26.8. Servlet ____________________________________________________________ 87 26.9. Cookie ____________________________________________________________ 88 26.10. Download ________________________________________________________ 88 26.11. Upload ___________________________________________________________ 88 26.12. RGB _____________________________________________________________ 88 26.13. CMYK ___________________________________________________________ 88
1.2. Intranet Intranet uma rede desenvolvida para processamento de informaes em uma empresa ou organizao. Seu uso inclui servios como distribuio de documentos e software, acesso a bancos de dados e treinamento. Uma intranet assim chamada porque ela geralmente emprega aplicativos associados Internet, como pginas da Web, navegadores da Web, sites FTP, Correio Eletrnico, grupos de notcias e listas de distribuio, acessveis somente s pessoas que fazem parte da empresa.
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 distribuio de informaes a grupos de pesquisas iniciado no ano de 1989 por cientistas do CERN (Centro European Researche Nucleare) laboratrio de fsica sediado em Genebra, na Suia, com o intuito de facilitar a comunicao interna e externa. Antes da WWW, os cientistas, assim como toda a comunidade Internet, necessitavam de uma srie de programas distintos para localizar, buscar e visualizar as informaes. 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 comeou a anunciar o projeto WWW. No entanto, apenas em fins de 1993 a World Wide Web iniciou sua fase de crescimento explosivo, com a introduo da verso 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 vrias tarefas necessrias para se obter as informaes disponveis na Internet. Usurios de todo o mundo foram atrados pela forma simples e divertida que a WWW disponibilizava o contedo da Internet. A organizao World Wide Web Consortium (W3C) responsvel pela padronizao do HTML. A especificao original do HTML foi desenvolvida, no CERN, por Tim Berners-Lee atual Preisidente do W3C, que transformou sua obra em patrimnio coletivo dos internautas. A verso padro do HTML hoje a 4.0. Entretando algumas verses de Browsers ainda interpretam somente a verso 3.2 do HTML. 1.4. Web
Unianhanguera Educacional S.A. 9
10
Browsers Internet Explorer http://www.microsoft.com/ie_intl/br/download Netscape http://www.netscape.com Opera http://www.operasoftware.com/download.html NetCaptor http://www.netcaptor.com PolyWeb http://psibersoft.hypermart.net NeoPlanet http://www.neoplanet.com KatieSoft Scroll http://www.katiesoft.com/scroll/download.html
11
Internet Explorer
Netscape Navigator
1.10. Protocolo Protocolo um conjunto de regras estabelecidas com o objetivo de permitir a comunicao entre computadores. um mtodo de acesso a um documento ou servio atravs da Internet, como File Transfer Protocol (FTP) ou Hypertext Transfer Protocol (HTTP). Tambm denominado tipo. 1.11. Protocolo HTTP (HyperText Transfer Protocol) (Protocolo de Transferncia de Hipertexto) HTTP um protocolo da Internet utilizado pelos computadores ligados Web para comunicar-se entre si, ativa os navegadores da Web para recuperarem informaes de servidores da World Wide Web. O protocolo permite a um usurio usar um programa cliente para entrar em um URL (ou clicar em um hyperlink) e recuperar texto, elementos grficos, som e outras informaes digitais de um servidor da Web. Endereos URL de recursos HTTP comeam com http://. 1.12. Protocolo FTP (File Transfer Protocol) (Protocolo de Trasferncia de Arquivo) FTP um protocolo que possibilita a transferncia de arquivos de um local para outro pela Internet. Normalmente, os sites tm reas pblicas de FTP, permitindo que os usurios faam download de programas por esse processo. Protegido por senhas, o FTP tambm utilizado para atualizar a distncia sites localizados em empresas hospedeiras.
Unianhanguera Educacional S.A. 12
Endereo IP (Endereo do Protocolo Internet) A maneira padro de identificar um computador conectado Internet, da mesma forma que um nmero de telefone identifica um telefone em uma rede telefnica. Um endereo IP representado por quatro nmeros separados por pontos e onde cada nmero menor que 256, por exemplo, 192.200.44.69. O administrador de seu servidor Web ou o provedor de servios de Internet ir atribuir um endereo IP a seu computador.
O tipo mais comum de URL http://, que fornece o endereo Internet de uma pgina da Web. Alguns outros tipos de URL so: ftp:// que fornece o local da rede de um recurso FTP. gopher:// que fornece o endereo Internet de um diretrio gopher news:// grupos de discusso ou de notcias (newsgroups)
Unianhanguera Educacional S.A. 13
1.13.2. URL Relativo Uma referncia relativa assume-se que a mquina e diretrio do item j esto sendo usados e apenas necessita-se indicar o nome do arquivo desejado (ou posivelmente subdiretrio e arquivo).Um URL relativo inclui um protocolo. Exemplo: O URL relativo Treinamento/Cursos.htm refere-se pgina Cursos.htm, na pasta Treinamento, abaixo da pasta atual.
1.13.3. Endereo Endereo o caminho at um objeto, documento, arquivo, pgina ou outro destino. Um endereo pode ser um URL (Uniforme Resource Locator - Localizador Uniforme de Recursos) ou um caminho de rede UNC (Universal Naming Convention Conveno Universal para Nomes), o formato padro 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 endereo http://www.xyz.com.br indica um URL do Web Site da XYZ Informtica Ltda.
14
http:// Protocolo - Protocolo da Internet utilizado pelos computadores ligados Web para comunicar-se entre si.
www.xyz.com.br Nome do Domnio - Domnio so as categorias de endereos da Internet que representam pases ou tipos de organizao.
www
XYZ Nome especfico que pode conter uma ou mais palavras, separadas ou no, por hifens (ex.: XYZ-informatica). com Tipo de Domnio - Indica a natureza do Site. No caso como trata-se de um Site de uma empresa privada, ".com" vem de comercial. Outros Exemplo: .gov (governo) e .org (organizaes sem fins lucrativos). br Sigla do Pas - composta de duas letras, significa que a pgina est situada em um computador no Brasil. Pginas que no possuem terminao indicando o pas de origem esto situadas nos Estados Unidos. Outros Exemplo: .pt (Portugal) e .jp (Japo).
treinamento Diretrio (pasta) onde est localizado a pgina (arquivo) cursos.htm. s vezes uma URL indica apenas o diretrio (ou o servidor). Nesse caso, o servidor se encarrega de procurar e enviar o arquivo adequado.
cursos.htm Nome da pgina escrita em HTML requerida (pginas da Web geralmente tem terminao em .htm ou .html).
#local
15
Um provedor geralmente oferece vrias funes de aplicaes como World Wide Web (http), transferncia de arquivos (ftp) e gerenciamento de contedo (armazenamento de dados). A maioria dos provedores tambm disponibilizam caixa postal eletrnica, "contas" de e-mail para seus usurios, juntamente com os servios de acesso e hospedagem. 1.14.2. Seu Site na Grande Rede Ao desenvolver sua Home Page, basta transferir seus arquivos via FTP para o Provedor. Alguns programas especficos podem facilitar o seu Upload, j que o Browser funciona apenas para busca de arquivos, e no para o envio. O CuteFTP um dos mais indicados pelos provedores, que permite um acesso totalmente grfico e interativo a servidores FTP. Mas, sem dvida, existe um excelente, o Internet Neighborhood. Sua interface comum ao do Microsoft Windows Explorer, funcionando de maneira simples, possibilitando Download e Upload da mquina local para o servidor FTP, transferindo arquivos de uma pasta para outra. 1.14.3. Login
Acesso. o processo de identificar-se ao entrar num computador ou em uma rede de computadores. A cada entrada na Internet, voc se "loga" (faz o login) em seu Provedor, colocando nome (username) e senha (password).
16
O documento HTML pode ser escrito em qualquer editor de textos, desde que este tenha a capacidade de grav-lo como cdigo ASCII (American Standard Code for Information Interchange - cdigo utilizado para representar textos quando h computadores envolvidos), isto , como texto puro, sem formatao ou caracteres de controle. Pode-se usar, portanto, o Notepad do Windows, ou o Edit do MS-DOS. Pode-se tambm usar editores mais modernos, como o Word, sendo necessrio neste caso que o documento seja gravado no formato texto e no como um ".doc" normal do MS-Word.
Conjunto de caracteres ASCII O conjunto de caracteres de 7 bits do cdigo padro americano para intercmbio de informaes (ASCII, American Standard Code for Information Interchange) e que amplamente usado para Unianhanguera Educacional S.A. 17
2.1. TAGs
TAGs so os "comandos" do HTML. Um documento HTML composto de TAGs que faro com que o browser monte a pgina de acordo com a formatao definida pelos 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 comea sua rea de influncia, enquanto o seu correspondente TAG de fechamento indica onde termina a rea de influncia. 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 minsculas ou maiscula, mas nunca podem haver espaos em branco dentro de TAGs, exceto entre atributos e entre aspas. Exemplo : <HTML>, <html>, <HtMl>, <Html>, ...
18
2.2.1. Incio e Fim do Documento Os TAGs <HTML> . . . </HTML> indicam respectivamente o incio e fim do documento. 2.2.2. Definies Lgicas sobre o Documento Entre os TAGs <HEAD> . . . </HEAD> esto as definies lgicas sobre o documento. Delimitam a seo de cabealho do documento. Trata-se da primeira seo do documento. 2.2.3. Ttulo da Pgina Os TAGs <TITLE> . . . </TITLE> indicam o ttulo do documento, que ser apresentado na barra superior do browser. Estas marcas devem constar da seo de cabealho. 2.2.4. Contedo da Pgina Entre os TAGs <BODY> . . . </BODY> esto o contedo da pgina que ser exposto pelo Browser, incluindo cabealho e rodap.
Unianhanguera Educacional S.A. 19
20
3.1. HTML <html>...</html> Atributo: No possui atributos Explicao: Indica que o documento presente um documento HTML. Deve englobar todos os demais TAGs. Exemplo: <html> ...todos os demais TAGs, textos, etc. </html>
3.2. HEAD <head>...</head> Atributo: No possui atributos Explicao: Contm o cabealho do documento diversas informaes lgicas, isto , que no fazem parte do corpo do documento e portanto no sero exibidas diretamente. Exemplo: <head> ...diversos TAGs contendo informaes lgicas sobre o documento... </head>
21
22
23
Exemplo do Elemento BODY com todos os seus Atributos: <html> <head> <title>XYZ Informtica</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.xyz.com.br">Oi! Eu sou um link!</a></p> </body>
24
26
Browser
Esta META TAG muito til para mudanas de endereo, levando o usurio automaticamente para o novo endereo. 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>Ttulo 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 aps 5 segundos, carregar a page1.htm. Outras definies de META TAG incluem informaes referentes verso do HTML, verso do navegador, ferramentas de criao Web e mecanismos de pesquisa. A maioria destas fontes de META TAG adicionais utilizam o atributo NAME, que designa informaes suplementares que no tm um cabealho 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" Explicao: Determina o nome do autor. Exemplo: <meta name="Autor" content="William Sheakspeare">
27
28
Exemplo: <html> <head> <meta name="keywords" lang="pt-br" content="INFORMTICA, TREINAMENTO, CONSULTORIA"> <title>XYZ Informtica</title> </head> <body>
Unianhanguera Educacional S.A. 30
HTML permite que caracteres especiais sejam representados por seqncias de escape, indicadas por trs partes: um & (e () comercial) inicial, um nmero ou cadeia de caracteres correspondente ao caracter desejado, e um ; (ponto
e vrgula) final. Exemplo:
Caracter Entidade de Caracter ã Entidade Numrica ã Descrio a c/ til
Um caracter bastante til o espao no ignorvel, o (Non-breaking space). Este caracter importante quando desejamos forar o browser a no ignorar espaos em branco entre palavras.
Caracter Non-breaking space Entidade de Caracter Entidade Numrica Descrio Espao no ignorvel
Exemplo: <body> <p>Veja como fica com espao no ignorvel!</p> </body> Visualizao pelo Browser: Veja como fica com espao no ignorvel!
32
Outras seqncias de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com as entidades mais utilizados em Portugus: Tabela de Caracteres Especiais e Acentuao
Caracter Entidade de Caracter " À Á Â Ã Ç É Ê Í Ó Ô Õ Ú Ü à á â ã ç é ê í ñ ó ô õ ú ü Entidade Numrica 	 " À Á Â Ã Ç É Ê Í Ó Ô Õ Ú Ü à á â ã ç é ê í ñ ó ô õ ú ü Descrio Tabulao Horizontal Espao no ignorvel Aspas A c/ crase A c/ acento agudo A c/ acento circunflexo A c/ til C cedilha (maisculo) 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 (minsculo) 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
"
33
5.1. Por que usar estas formataes ? Os browsers costumam tambm mostrar corretamente os caracteres acentuados normalmente. Essa prtica, embora facilite sobremaneira a digitao dos documentos, no recomendada "ainda", devido a um problema relativo a transmisso desses caracteres. Chama-se conjunto de caracteres uma representao digital de texto. Um caracter um smbolo cujas diversas representaes devem significar a mesma coisa para uma comunidade de pessoas. Na prtica, porm, existem alguns conjuntos que associam dois nmeros distintos a um mesmo caracter. Os Browser j permitem que se escolha a codificao adequada ao conjunto de caracteres relativo aos documentos a serem recuperados. Mas para garantir a interpretao apropriada de um documento, pode-se inserir uma indicao do esquema de codificao, atravs do campo: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Na World Wide Web, os acentos da Lngua Portuguesa chegam a travar os Browsers de usurios em outros pases, que usam um conjunto de caracteres diferentes do ISO Latin 1 apesar do ISO Latin 1 ser padro na Web.
6. Cores Atravs de Valores Hexadecimais As cores so definidas atravs de um valor hexadecimal de 6 algarismos, ou atravs de seus nomes. Os nomes padronizados so: 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 verses do MS-Windows. Alguns Browsers implementam outros nomes no padronizados.
34
35
Exemplo: <html> <head> <title>XYZ Informtica</title> </head> <body> <!--------------------- Link para o Site da XYZ Informtica -------------------> <p><a href="http://www.xyz.com.br">Oi! Eu sou um link para o site da XYZ Informtica!</a></p> </body> </html> Visualizao pelo Browser: Oi! Eu sou um link para o site da XYZ Informtica!
36
Atributos de Hn Atributo: ALIGN Explicao: Indica se o cabealho ser alinhado a esquerda (padro), 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 Trs</h3>
37
38
P <p>...</p> Explicao: Indica que o texto influenciado um pargrafo, e possui um alinhamento prprio. Os browsers, habitualmente, deixam um espao vertical em branco de cerca de "uma linha" antes de cada pargrafo. Exemplo: <p>Esta a Home Page da XYZ Informtica. E este um exemplo de pargrafo.</p>
Atributos de P Atributo: ALIGN Explicao: Indica se o pargrafo ser alinhado a esquerda (padro), centralizado, a direita ou justificado usando-se, respectivamente, as palvras "LEFT", "CENTER", "RIGHT" e "JUSTIFY". Exemplo: <p align="center">Esta a Home Page da XYZ Informtica. E este um exemplo de pargrafo centralizado.</p>
40
BR <br> Atributo: No possui atributos Explicao: Passa para a prxima linha. Exemplo: <p>Este texto ficar na mesma linha.<br> E este em outra linha.</p> Visualizao pelo Browser: Este texto ficar na mesma linha. E este em outra linha. 8.6. O TAG Blockquote <blockquote>...</blockquote> Atributo: No possui atributos Explicao: Faz a margem comear mais dentro da pgina. O efeito deste TAG pode ser acumulado, obtendo assim margens maiores. Exemplo: <blockquote>Esta a Home Page da XYZ Informtica. E este um exemplo de margem visualizada pelo Browser.</blockquote> Visualizao pelo Browser: Esta a Home Page da XYZ Informtica. E este um exemplo de margem visualizada pelo Browser. 8.7. O TAG DIV <div>...</div> Explicao: Indica que o texto influenciado uma diviso, e possui portanto um alinhamento prprio. Atributos de DIV Atributo: ALIGN Explicao: Indica se a diviso ser alinhado a esquerda (padro), centralizado, a direita ou justificado usando-se, respectivamente, as palvras "LEFT", "CENTER", "RIGHT" e "JUSTIFY". utilizado no lugar do TAG <p>, quando se deseja modificar o alinhamento sem, no entanto, uinserir-se espao vertical em branco. Exemplo: <div align="right">Esta a Home Page da XYZ Informtica. E esta a minha diviso.</div> 8.8. O TAG PRE <pre>...</pre> Atributo: No possui atributos
Unianhanguera Educacional S.A. 41
42
43
44
45
46
DT <dt> Atributo: No possui atributos Explicao: Representa o termo definido, a ser explicado em <DD>. Exemplo: <dl> <dt> Treinamento </dt> <dd> um departamento da XYZ Informtica. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl> Visualizao pelo Browser: Treinamento um departamento da XYZ Informtica. Consultoria um outro departamento!
47
DD <dd> Atributo: No possui atributos Explicao: Representa a definio do termo presente em <DT>. No deve conter HEADERs. Exemplo: <dl> <dt> Treinamento </dt> <dd> um departamento da XYZ Informtica. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl> Visualizao pelo Browser: Treinamento um departamento da XYZ Informtica. Consultoria um outro departamento!
48
49
IMG <img> Explicao: Este TAG exibe uma imagem na pgina. Atributos de IMG Atributo: SRC Explicao: Obrigatrio, indica a URL da imagem a ser exibida. Podem ser usadas URL absoluto (http://www.xyz.com.br/images/imagem.gif) ou URL relativo (/images/imagem.gif) Exemplo: <img src="/images/imagem.gif"> Atributo: ALT Explicao: Indica um texto asociado imagem. Quando a imagem no puder ser exibida, o texto exibido em seu lugar. Este texto tambm exibido quando o cursor fica parado sobre a imagem. Exemplo: <img src="/images/imagem.gif" alt="Logotipo da XYZ Informtica"> Atributo: ALIGN Explicao: Determina o alinhamento da imagem em relao ao texto existente na mesma linha. Os valores vlidos so "TOP", "MIDDLE", "BOTTOM","LEFT" e "RIGHT". Exemplo: <img src="/images/imagem.gif" align="top"> Atributo: WIDTH Explicao: Determina a largura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" width="600"> Atributo: HEIGHT Explicao: Determina a altura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" height="60"> Atributo: BORDER
Unianhanguera Educacional S.A. 51
12.2. Usando o JPEG (Joint Photographic Experts Group) 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 milhes de cores. Armazena imagens complexas de forma eficiente. Tem uma compresso varivel. Porm, como nem tudo perfeito, quanto mais voc comprime, maior ser a perda da qualidade. A compresso padro em torno de 33 (numa escala de 1 a 100), mas a ideal, s testando mesmo. Quanto maior o nmero, pior fica a qualidade.
Unianhanguera Educacional S.A. 53
12.3. Sobre o PNG (Portable Networ Graphics) Um formato novo, ainda no muito comum na Internet, o PNG (Portable Network Graphics), desenvolvido por um grupo formado especialmente com este fim. Ele uma evoluo das GIFs que conhecemos, mantendo diversas de suas caractersticas e incorporando novas com pouco custo de implementaco aos desenvolvedores. Suporta cores TRUECOLOR (48 bits por pixel), interlaamento, transparncia, 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, so necessrios 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 possveis no JPEG. Neste formato, o tamanho do arquivo depende da qualidade que voc pode optar para a sua imagem. Alm disso, alguns softwares permitem que voc configure a resoluo da imagem . A maioria das imagens salva com a resoluo de 300 dpi (pontos por polegada). Porm como a resoluo da maioria dos monitores (padro SVGA) de computador de 96 dpi, pode-se sempre diminuir para este valor. Experimente fazer alguns testes com os dois formatos, variando o nmero de cores, compresso e resoluo. Ferramentas Grficas e GIFs Animados Paint Shop Pro 6.0 / Animation Shop http://www.jasc.com/psp.html Photoshop 5.5 / ImageReady 2.0 http://www.adobe.com Lista com diversas opes no Site da Tucows, na seo Image Animators Image Animators http://wwwtucows.matrix.com.br/imgani95.html
Unianhanguera Educacional S.A. 54
Atributos de AREA Atributo: COORDS Explicao: Define as coordenadas da rea. Varia de acordo com o formato declarado em "SHAPE". Exemplo: <area coords="10,10,20,30" href="pagina2.htm"> Atributo: HREF Explicao: Indica a URL destino da rea. Exemplo: <area coords="45,30,60,90" href="pagina2.htm"> Atributo: NOHREF Explicao: Indica que aquela rea ser neutra.
Unianhanguera Educacional S.A. 55
Foi inserida, atravs do TAG <IMG> uma imagem no documento. O atributo "USEMAP" define esta imagem como um Mapa Sensitivo local. Exemplo: <img src="imagem.gif" width="600" height="60" alt="imagem.gif" border="0" usemap="#mapa1"> O Mapa Sensitivo ser descrito atravs do TAG <MAP>. O nome da descrio ser "mapa1". Exemplo: <map name="mapa1"> Esta imagem no funcionar como um Mapa Sensitivo em browsers antigos, pois estes ignoraro o atributo "USEMAP".
13.2. Descrio
56
Exemplo: <html> <head> <title>XYZ Informtica</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.xyz.com.br/treinamento.htm"> <area shape="rect" coords="0,0,300,60" href="http://www.XYZ.com/consultoria.htm"> </map> </body> </html> Foi criado um Mapa Sensitivo interpretado localmente. Para isso, o TAG <IMG> foi utilizado na definio da imagem e do respectivo mapa. Em seguida, o mapa definido, atravs dos TAGs <MAP> e <AREA>. Exemplo feito com a ajuda de um Editor de HTML: <html> <head> <title>XYZ Informtica</title> </head> <body> <p><!--webbot bot="ImageMap" rectangle="(300,2) (600, 60) http://www.xyz.com.br/treinamento.htm" rectangle="(0,0) (300, 60) http://www.xyz.com.br/consultoria.htm" src="imagem.gif" width="600" height="60" alt="imagem.gif" border="0" --></p> </body> </html> 14. Tabelas
Unianhanguera Educacional S.A. 57
Exemplo: <table> <tr> <td valign="middle">Texto A</td> <td>Texto B</td> </tr> </table> Atributo: WIDTH Explicao: Define a largura da clula. 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 Explicao: Indica quantas "clulas de largura" (colunas) a respectiva clula deve ocupar. Exemplo: <table> <tr> <td colspan="2">Texto A</td> </tr> <tr> <td>Texto B</td> </tr> </table> Atributo: ROWSPAN
Unianhanguera Educacional S.A. 61
62
Atributos de TH Explicao: Define se o contedo da clula estar alinhado a esquerda ("LEFT"), centralizado ("CENTER") ou a direita ("RIGHT"). Se omitido, o alinhamento fica centralizado.
Atributo: ROWSPAN Explicao: Indica quantas "clulas de altura" (linhas) a respectiva clula deve ocupar. Exemplo: <table> <tr>
Unianhanguera Educacional S.A. 64
CAPTION <caption>...</caption> Explicao: Define um ttulo (legenda) para a tabela. Exemplo: <table> <caption>Ttulo da Tabela</caption> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table> Atributos de CAPTION Atributo: ALIGN Explicao: Indica se o ttulo (legenda) deve ficar acima ou abixo da tabela. Deve possuir o valor "TOP" ou "BOTTOM". Exemplo: <table> <caption align="bottom">Ttulo da Tabela</caption> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table> O ttulo no exibido "dentro" da tabela (visualmente). O TAG "CAPTION" deve estar contido entre os TAGs de abertura e fechamento da tabela, no entanto, fora de qualquer linha. 15. Espaamento (Netscape Navigator) SPACER <spacer> Explicao: Insere um espao em branco (medido em pixels) na pgina.
Unianhanguera Educacional S.A. 65
Atributos de FORM Atributo: ACTION Explicao: Indica a localizao (URL) do script que ir receber e interpretar os dados enviados pelo formulrio. Exemplo: <form method="POST" action="http://www.xyz.com.br/cgi-bin/script"> Atributo: METHOD Explicao: Indica o formato no qual os dados sero enviados. Pode assumir os valores "GET" (indica como os dados sero passados pelo script) ou "POST" (envia os dados para entrada padro do sistema operacional). <form method="POST" action="http://www.xyz.com.br/cgi-bin/script"> INPUT <input> Explicao: Indica um objeto (campo texto, checkbox, etc). Exemplo: <input type="text" size="30"> Atributos de INPUT Atributo: TYPE Explicao: Especifica que tipo de objeto deve ser: "TEXT", "PASSWORD", CHECKBOX", "HIDDEN", "RADIO", BUTTON", "SUBMIT" e "RESET". Exemplo: <input type="text" size="40"> Atributo: NAME Explicao: Indica o nome do objeto. Este nome no ser exibido para o usurio. Ele utilizado pelo script associado ao formulrio para a manipulao de suas informaes. Exemplo: <input type="text" size="20" name="endereco"> Atributo: VALUE Explicao: o contedo do objeto. Dependendo do tipo de objeto (ex.: caixas de texto) o contedo pode ser manipulado pelo usurio. Exemplo: <input type="text" size="40" value="Rio de Janeiro"> Atributo: SIZE Explicao: Indica o nmero de caracteres visveis de um objeto tipo "TEXT" (caixa de texto). Exemplo: <input type="text" size="40"> Atributo: MAXLENGTH
Unianhanguera Educacional S.A. 69
17.1. Envio de Arquivos A definio do formulrio 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 implementao do campo onde ser indicado qual o arquivo para UPLOAD (envio) feita atravs do TAG: <form enctype="file" name="NomeQualquer" size="xx"> A sintaxe do formulrio no sofre outras alteraes. 17.2. FORM FIELD - Exemplos
Unianhanguera Educacional S.A. 71
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>
17.2.3. Check Box Exemplo: <form method="POST" action="_URL_"> <input type="checkbox" name="C1" value="ON">Tpico 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>
72
Exemplo: <form method="POST" action="_URL_"> <select name="D1" size="1"> <option selected value="http://www.xyz.com.br/topico1">Tpico 1</option> <option value="http://www.xyz.com.br/topico1">Tpico 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>
Exerccio de Formulrio Todas as informaes fornecidas em um formulrio so agrupadas e enviadas para um programa, mais conhecido como Script CGI, que escrito especialmente para processar esses dados de acordo com alguma necessidade ou especificao.
Unianhanguera Educacional S.A. 73
18. Som 18.1. Controles de Som do Microsoft Internet Explorer O Microsoft Internet Explorer incorpora a seu HTML nativo a capacidade de tocar arquivos de som, nos padres midi, au e wave, atravs do TAG <BGSOUND>. BGSOUND <bgsound> (Microsoft Internet Explorer) Explicao: Reproduz um determinado som em "background", isto , enquanto o usurio utiliza a pgina. O som somente iniciado quando o seu download concludo. Isto difere este TAG de produtos como o Real Audio, que reproduz o som na medida em que o arquivo correspondente chega ao browser.
Unianhanguera Educacional S.A. 75
18.2. Controles de Som no Netscape Navigator Diferentemente do Explorer, o Netscape no vem com controles nativos de som, mas tem a capacidade de tocar diferentes tipos de sons atravs do plug-in LiveAudio, que vem normalmente incorporado ao software Netscape a partir da sua verso 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 usurios deste browser o tero instalado. 19. Frames 19.1. Definio At a chegada do Netscape 2.0, e com ele a implementao do NHTML, uma pgina era composta de uma janela, sem divises. Atravs 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. Alm disso, uma frame pode "ordenar" ao browser para que este atualize, com a URL indicada, uma frame diferente. Como todos os recursos mais avanados para a construo de Home Pages, tambm os frames devem ser utilizados com o mximo de cuidado. Sua utilizao deve obedecer ao critrio de necessidade, para no prejudicar o designe a navegabilidade da pgina. Os casos de real necessidade de frames no so tantos, mas quando surgem, as frames podem melhorar dramaticamente o site. Casos de ndices e tutoriais so alguns dos mais comuns em que o uso de frames mais indicado. Exatamente para efeitos de design, pode-se alterar as diversas caractersticas de frames atravs de recursos como omisso de barra de rolagem e borda. 19.2. Documentos de Layout e Documentos de Contedo
Unianhanguera Educacional S.A. 76
NOFRAME <noframe>...</noframe> Explicao: Permite a criao de uma opo de navegao para browsers mais antigos, que no entendem frames. Exemplo: <noframes> <body> <p>Esta pgina usa Frame, mas o seu Browser no os suporta.</p> </body> </noframes> Os browsers que entendem frames ignoram toda a rea de influncia de <NOFRAMES>. Assim, pginas cim frames podem conter mensagens que somente sero lidas pelos browsers mais antigos, provavelmente avisando a seus usurios para que consigam uma verso mais nova, ou que sigam um determinado link para pgina escrita sem o uso de frames.
Unianhanguera Educacional S.A. 79
Uma frame pode exibir um documento de contedo, isto , um documento tradicional com textos, imagens etc, ou um documento de layout, que a dividiria novamente em outras frames. Chama-se isto de diviso indireta.
80
82
Comentrio no cdigo HTML que insere automaticamente texto nas pginas quando elas so buscadas por um navegador da Web. As pginas que contm SSI recebem
extenses ".SHL", ".STM", ".SHTM" ou ".SHTML". 20.1. Criando Pginas Dinmicas com SSI (Server Side Include) Como criar nos Sites pginas que esto sempre mudando, sem que ningum precise alter-las? Muitos Sites na Web exibem, em pginas fixas, barras ou quadros com contedo varvel. 1. Crie uma pgina HTML coloque um texto, uma imagem - o que desejar. 2. Salve a parte que desejar da pgina, 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 trs linhas seguintes: Exemplo: <!----- Comentrio ----------------> <!-- #includevirtual="texto.txt" --> <!----- /Comentrio ---------------> A primeira e ltima linhas so apenas comentrios. Servem para voc saber que ali entrar o contedo do arquivo "texto.txt". A linha do meio contm a chamada para o servio SSI. Entre o sinal de exclamao e o item #include coloque exatamente dois hifens ("--"). Exemplo: <!-- #includevirtual="texto.txt" --> Em lugar de escrever apenas "texto.txt", indique o diretrio onde se encontra o arquivo. Exemplo: <html> <head> <title>XYZ Informtica</title> </head> <body> <!----- Comentrio -----> <!-- #includevirtual="file:///c:\diretrio\texto.txt" --> <!----- /Comentrio -----> </body>
Unianhanguera Educacional S.A. 83
21.1. Planejamento
Definio do objetivo do site. Voc pode criar uma pgina simples com informaes bsicas ou decidirse por fazer um comrcio eletrnico, tudo depende do capital disponvel. Lembre-se que o site ser feito para seu pblico alvo.
21.4. Design
Lembre-se que criar um site moderno no uilizar todos os tipos de tecnologia disponvel, a prioriadade deve ser as informaes. Por outro lado muito informao, com pouca preocupao no design no funcional.
21.5. Programao
Verifique o funcionamento dos scripts e programas que realizam tarefas automticas. Se possvel, teste o site em vrias verses de browsers.
21.6. Divulgao
Unianhanguera Educacional S.A. 84
21.7. Manuteno
Atualize as informaes periodicamente e verifique o funcionamento de links e scripts.
22. DHTML (HTML Dinmico) Refere-se a pginas Web cujo contedo se modifica sem interveno direta do WebMaster. Uma mesma pgina pode ser vista de forma diferente, dependendo de variveis como a localizao geogrfica do Internauta, a hora da visita, pginas anteriores j vistas e as preferncias do usurio. Vrias tecnologias so usadas para produzir HTML dinmico: Scripts CGI, Server Side Includes (SSI), Cookies, Java, JavaScript e ActiveX. DHTML permite criar efeitos especiais, tais como texto em que sai da pgina uma palavra por vez ou efeitos de transio com estilo de mensagem giratria entre as pginas. 23. XML (Extensible Markup Language) O XML uma evoluo do HTML - no apenas convive, como se integra facilmente a ele. Ainda h poucas ferramentas para o trabalho em XML e poucos softwares capazes de interpret-lo. Mas a adoo dessa tecnologia pelos principais fabricantes deve mudar esse panorama em pouco tempo. O Internet Explorer 5.0, foi o primeiro produto massivamente usado a adotar a novidade. O novo browser da Netscape, tambm abraar o XML. O XML e o HTML tm uma origem comum, o SGML (Standard Generalized Markup Language), um padro internacional genrico para descrio da estrutura de diversos tipos de documentos eletrnicos. Ao contrrio do HTML, no entanto, o XML no estabelece como um determinado elemento deve ser visualizado. Seu objetivo armazenar as informaes de forma organizada. A idia que um arquivo XML possa ser apresentado em mdias diferentes - um mesmo material, por exemplo, pode receber determinado tratamento grfico para a Web e outra formatao para ser impresso. Por suas caractersticas, o XML necessita de um intermedirio para que os dados sejam visualizados.
85
26.7. Applet Programa escrito para rodar dentro de outro programa (por exemplo, macros do Word ou do Excel). Um applet no pode ser executado de forma autnoma. Os Applets escritos em Java, responsveis por boa parte da dinmica da Web, em geral rodam no ambiente do Browser. 26.8. Servlet
Unianhanguera Educacional S.A. 87
88
89