Professional Documents
Culture Documents
HTML
1.15. Resoluo _____________________________________________________________________ 15 2. HTML (HyperText Markup Language)_____________________________________________________ 15 2.1. TAGs __________________________________________________________________________ 16 2.2. Estrutura Bsica __________________________________________________________________ 17 2.2.1. Incio e Fim do Documento ______________________________________________________ 17 2.2.2. Definies Lgicas sobre o Documento_____________________________________________ 17 2.2.3. Ttulo da Pgina ______________________________________________________________ 17 2.2.4. Contedo da Pgina ___________________________________________________________ 17 2.3. TAG com Atributos _______________________________________________________________ 18 3. Estrutura da Pgina ___________________________________________________________________ 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
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
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 Mozilla Firefox http://www.mozilla.com/en-US/firefox/
Internet Explorer
Mozilla Firefox
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.
10
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:
11
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 possivelmente subdiretrio e arquivo).Um URL relativo inclui um protocolo. Exemplo: O URL relativo Pgina de teste/index.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. universominas.com.br indica um URL do Web Site da Universo Minas Ltda.
12
http:// Protocolo - Protocolo da Internet utilizado pelos computadores ligados Web para comunicar-se entre si.
www.Universominas.com.br Nome do Domnio - Domnio so as categorias de endereos da Internet que representam pases ou tipos de organizao.
www
UNIVERSOMINAS Nome especfico que pode conter uma ou mais palavras, separadas ou no, por hifens (ex.: UNIVERSOMINAS-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 localizada 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 e m HTML requerida ( pginas da Web geralmente tm terminao em .htm ou .html).
#local Aponta para o local especfico dentro da pgina que ser exibida.
13
Um provedor geralmente oferece vrias funes de aplicaes como World Wide Web (www, 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).
14
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
15
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 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 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>, <hTmL> ...
16
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.
17
18
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>
19
20
21
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>
22
24
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">
25
26
27
28
No irritante quando outros Sites exibem suas pginas dentro das molduras deles? Uma forma no muito elegante de evitar isso empregando o "Window-target" com um valor "_top". O valor "_top" informa aos navegadores compatveis para carregarem a pgina dentro do conjunto de molduras superior. Isso evita que a pgina aparea emoldurada no interior de outra. Exemplo: <meta http-equiv="Window-target" content="_top"> As META TAGs tambm podem ajuda-lo a gerenciar contedo - e esta uma rea que todo WebMaster deveria apreciar. Os WebMasters deveriam gerenciar adequadamente o contedo como META TAGs, informando aos navegadores quando solicitar verses mais recente de pginas, quando no armazenar as pginas em cache, etc. Voc informa aos navegadores quando solicitar verses de pginas mais recentes definindo uma data de validade com HTTP-EQUIV="EXPIRES". Os navegadores interpretam datas ilegais como um vencimento imediato. Para evitar isso, as datas devem ser definidas no formato RFC850. Exemplo: <meta http-equiv="expires" content="Mon, 12 Apr 1999 10:00:00 GMT"> Cuidado ao utilizar as datas de validade. Alguns indexadores excluem as pginas vencidas do seu ndice mestre ou programa de reindexao da pgina. Uma outra forma de controlar o cache usar o PRAGMA com um valor de "NO-CACHE", que emite a mesma solicitao de quando pressionamos o Reload (Recomear) do "navegador" , O "NO-CACHE" o nico valor vlido, e utilizado da seguinte maneira: Exemplo: <meta http-equiv="pragma" content="no-cache"> Quando voc planejar adicionar meta informaes ao seu Site Web, comece pela Home Page (Pgina Principal). Depois de atualizar a Home Page e as pginas de nvel superior, considere adicionar as meta informaes ao restante de seu Site.
29
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!
30
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
"
31
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.
32
33
Exemplo: <html> <head> <title>Universo Minas</title> </head> <body> <!--------------------- Link para o Site da Universo Minas -------------------> <p><a href="http://www.Universominas.com.br">Oi! Eu sou um link para o site da Universo Minas!</a></p> </body> </html> Visualizao pelo Browser: Oi! Eu sou um link para o site da Universo Minas!
34
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>
35
36
37
Atributo: SIZE
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 Universo Minas. 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 Universo Minas. E este um exemplo de pargrafo centralizado.</p>
39
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 Universo Minas. E este um exemplo de margem visualizada pelo Browser.</blockquote> Visualizao pelo Browser: Esta a Home Page da Universo Minas. 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, uinserirse espao vertical em branco. Exemplo: <div align="right">Esta a Home Page da Universo Minas. E esta a minha diviso.</div>
40
41
42
43
44
45
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 Universo Minas. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl> Visualizao pelo Browser: Treinamento um departamento da Universo Minas. Consultoria um outro departamento!
46
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 Universo Minas. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl> Visualizao pelo Browser: Treinamento um departamento da Universo Minas. Consultoria um outro departamento!
47
48
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.Universominas.com.br/images/imagem.gif) ou URL (/images/imagem.gif) Exemplo: <img src="/images/imagem.gif">
relativo
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 Universo Minas"> 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">
50
52
53
Atributos de AREA Atributo: COORDS Explicao: Define as coordenadas da rea. Varia de acordo com o formato declarado em "SHAPE". Exemplo:
54
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">
55
13.2. Descrio Uma imagem com 600 Pixels de Largura e 60 Pixels de Altura ser dividida em dois blocos para serem feitos links para duas pginas distintas. Link para http://www.touch.com.br/ consultoria.htm Link para http://www.touch.com.br/ treinamento.htm
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 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:
56
Exemplo: <table> <tr> <td valign="middle">Texto A</td> <td>Texto B</td> </tr> </table>
60
61
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.
62
63
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>
64
66
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.Universominas.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.Universominas.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
68
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 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>
71
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>
17.2.4. Radio Button Exemplo: <form method="POST" action="_URL_"> <input type="radio" value="V1" checked name="R1">Tpico 1<input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"> </form>
Exemplo: <form method="POST" action="_URL_"> <select name="D1" size="1"> <option selected value="http://www.Universominas.com.br/topico1">Tpico 1</option>
72
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. Atualizao ou consulta a base de dados, envio de dados por e-mail, ou simplesmente a construo de uma nova pgina (gerada a partir dos novos dados) so algumas das aplicaes mais comuns. Escrever um Script CGI no tarefa fcil para a maioria dos WebDesigners, mas existem vrios CGI "pr-fabricados" disponveis gratuitamente na Rede, que processam as informaes fornecidas de forma transparente. Como exerccio proposto vamos utilizar o AnyForm para ensinar como colocar um formulrio em uma pgina HTML. <html> <head> <title>Formulrio</title> </head> <body> <p><font face="Verdana, Arial, Helvetica" size="2" color="blue"><b>Deixe aqui seus comentrios!</b></font></p>
73
74
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. Atributos de BGSOUND Atributo: SRC Explicao: Indica qual o arquivo de udio a ser reproduzido. Podem ser utilizados os formatos ".wav". ".au" e ".mid".
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 Com a definio de frames, os documentos escritos em HTML ( extenso. html ou htm) podem ser de dois tipos:
76
77
78
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.
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
81
82
21.1. Planejamento
Definio do objetivo do site. Voc pode criar uma pgina simples com informaes bsicas ou decidir-se 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.
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. 24. Editores de HTML Torna-se bem mais simples e agradvel a confeco de pginas quando se usa um software apropriado. No existe hoje um programa padro para desenvolvimento em HTML, nem um editor WYSIWYG (What You See Is What You Get) perfeito para a criao de pginas.
85
86
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 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 substituio aos programas CGI
87