Aprendendo HTML: Iniciando um documento, TAGs, Formatação de textos, Exemplos e Tabelas, Notas de estudo de Informática

Baixe Aprendendo HTML: Iniciando um documento, TAGs, Formatação de textos, Exemplos e Tabelas e outras Notas de estudo em PDF para Informática, somente na Docsity! Aprendendo HTML www.businessmail.kit.net 1 Índice 1. HTML Básico I 03 1.1 - Iniciando um documento 03 1.2 - TAGs usados no início do documento 03 1.3 - Títulos e subtítulos 03 1.4 - Formatação de textos 04 2. HTML Básico II 05 2.1 - Imagens 05 2.2 - Links 05 3. Listas 06 3.1 - Criando listas ordenadas 06 3.2 - Criando listas não ordenadas 06 3.3 - Atributos adicionais do elemento UL 07 4. Refresh Page 08 5. Tabelas 09 5.1 - Construindo tabelas com o elemento TABLE 09 5.1.1 - O título da tabela (Elemento CAPTION) 09 5.1.2 - Table Headings (Elemento TH) 09 5.1.3 - Table Data (Elemento TD) 09 5.1.4 End of Table Row (Elemento TR) 09 5.2 - Atributos para a Tabela 10 5.2.1 - BORDER 10 5.2.2 - ALIGN 11 5.2.3 - VALIGN 11 6. Formulários 12 6.1 - Construindo formulários com o FORM 12 6.2 - Atributos para FORM 12 6.2.1 - GET 12 6.2.2 - POST 12 6.2.3 - INPUT 13 6.2.3.1 - Tipos de elementos TYPE 13 6.2.3.1.1 - TYPE=”RADIO” 13 6.2.3.1.2 - TYPE=”PASSWORD” 14 6.2.3.1.3 - TYPE=”CHECKBOX” 14 6.2.3.1.4 - TYPE=”SUBMIT” 14 6.2.3.1.5 - TYPE=”RESET” 14 6.2.4 - TEXTAREA 15 6.2.5 - SELECT 15 6.3 - Exemplo Completo 15 7. Frames 17 7.1 - Estrutura 17 7.2 - Sintaxe 17 7.3 - FRAMESET 17 7.3.1 - ROWS 17 7.3.2 - COLS 18 7.4 - FRAME 18 7.4.1 - SRC 18 7.4.2 - NAME 18 Aprendendo HTML www.businessmail.kit.net 2 7.4.3 - SCROLLING 19 7.4.4 - NORESIZE 19 7.4.5 - TARGET 19 7.5 - BORDER 20 8. Música 21 9. Caracteres Especiais 22 10. Imagens Clicáveis 23 10.1 - Métodos que tornam sua imagem sensível 23 10.2 - Sensibilizando as imagens 24 11. GIFs Animados 26 11.1 - Configuração 26 12. Ferramentas 27 12.1 - Utilitários gráfico 27 12.2 - Editores HTML 27 13. Hospedagem 29 14. Glossário 30 1. HTML Básico I HTML significa Hypertext Markup Language e é a linguagem de descrição de documentos usada na World Wide Web. Ela é orientada por marcadores ou TAGs. Aprendendo HTML www.businessmail.kit.net 5 2.2 - LINKS Os Links servem para criar Palavras Quentes, que permitem a interligação entre documentos HTML e outros documentos ou até arquivos FTP. Veja o seguinte exemplo: <ul> <li><a href=#inicio>Para o próprio documento</a></li> <li><a href="ivl.htm#inicio">Para outro documento</a></li> <li><a href="http://www.nome_da_página.com.br/">Para minha Home Page</a></li> <li><a href="filme1.jpg">Âncora para imagem externa</a></li></ul> Use: <A HREF=destino>Texto ou imagem</A><A NAME=nome>...</A> O parâmetro NAME serve para marcar um ponto para possíveis desvios. Quando desviamos para um determinado ponto dentro de um documento, indicamos este nome com um "#". Por exemplo: <A NAME="AQUI">Aqui é um ponto para desvios</A>...<A HREF="#AQUI">Desvia para o ponto "AQUI"</A> 3. Listas 3.1 - CRIANDO LISTAS ORDENADAS Listas ordenadas, são também denominadas listas numeradas, pois, quando um navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando números, como 1, 2, 3, e assim sucessivamente. Listas ordenadas são iniciadas pela TAG <OL>. Cada item utiliza a TAG <LI>. Finalmente, </OL>. Exemplo: <OL> <LI>É facil fazer uma Home Page <LI>Tem que ter paciência <LI>Bons recursos <LI>E não exagerar em imagens </OL> Resultado: Aprendendo HTML www.businessmail.kit.net 6 1. É facil fazer uma Home Page 2. Tem que ter paciência 3. Bons Recursos 4.E não exagerar em imagens. 3.2 - CRIANDO LISTAS NÃO ORDENADAS Listas não ordenadas são muito parecidas com as ordenadas. A única diferença é o fato de elas não definirem explicitamente uma ordem, como é no caso as numeradas. Eles são formados por símbolos, que podem ser bola, quadrado, e uma bola vazia. Elas são iniciadas com a TAG <UL> e são respectivamente terminadas com </UL>. E seus elementos são que nem as numeradas: com <LI> Exemplo: <UL> <LI>Internet <LI>Intranet <LI>BBS </UL> resultado: • Internet • Intranet • BBS 3.3 - ATRIBUTOS ADICIONAIS DO ELEMENTO UL O Netscape introduziu o atributo TYPE também em listas ordenadas. Ele recebe o tipo do marcador que será utilizado ao lado dos itens da lista, o qual pode ser CIRCLE, SQUARE OU DISC. Aprendendo HTML www.businessmail.kit.net 7 4. Refresh Page São páginas normalmente sem links, que chamam outras depois de um determinado tempo dentro dela, sem nenhuma interferência do internauta. Para fazer uma página desta basta colocar no documento a seguinte linha de comando: Ex.: <HTML> <HEAD> <META HTTP-EQUIV="REFRESH" CONTENT="segundos; URL=Documento.htm"> <TITLE> Título </TITLE> </HEAD> <BODY> Corpo do Documento </BODY> </HTML> Aprendendo HTML <TABLE BORDER=5> <TD>TESTE</TD> <TD>TESTE2</TD> <TD>TESTE3</TD> <TR> <TD>TESTE4</TD> <TD>TESTE5</TD> <TD>TESTE6</TD> </TABLE> Veja o resultado: 5.2.2 - ALIGN Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto dentro de uma célula, com ralação as bordas laterais. Quando aplicado a TR, ele define o alinhamento de toda uma linha da tabela O exemplo abaixo, mostra como o ALIGN aceita os valores LEFT, CENTER ou RIGHT, para alinhar à esquerda, centralizar ou alinhar à direita, respectivamente. <TABLE BORDER> <TD>Primeira célula</TD> <TD>Segunda célula</TD> <TD>Terceira célula</TD> <TR> <TD ALIGN="CENTER">Centro</TD> <TD ALIGN="LEFT">Esquerda</TD> <TD ALIGN="RIGHT">Direita</TD> <TR> </TABLE> Veja o resultado: 5.2.3 - VALIGN Pode ser aplicado a TH e TD e define o alinhamento do texto em relação às bordas superior e inferior. Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no meio e na parte de baixo, respectivamente. Veja o exemplo: <TABLE BORDER> <TD>Teste de alinhamento</TD> <TD VALIGN="TOP">TOP</TD> <TD VALIGN="middle">MIDDLE</TD> <TD VALIGN="bottom">BOTTOM</TD> www.businessmail.kit.net 10 </TABLE> Aprendendo HTML Veja o resultado: 6. Formulários A linguagem HTML também permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botões e passando informações. Por exemplo, eu tenho um Guest Book (formulário) em meu site onde eu peço a todos os visitantes que dêem suas opiniões. Essas informações, devem ser tratadas por programas, denominados scripts, que podem armazená-las para uma posterior utilização. Os scripts podem ainda retornar um outro documento HTML, uma URL, ou algum outro tipo de dado para o cliente. O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele provê uma maneira agradável e familiar para coletar dados do usuário através da criação de formulários com janelas de entrada de textos, botões, etc. É preciso ter em mente que o FORM coleta dados, mas não os processa. São os scripts que entendem os dados, como mencionado. É aí que entra a necessidade da interface CGI. Tal interface, permite que o servidor se comunique com o script que vai atuar sobre essas informações, retornando os resultados para o navegador. A confecção de scripts exige que se aprenda uma linguagem de programação chamada PERL. Abaixo temos alguns endereços que processará os dados para você, e os retornará via e-mail. Aqui estão as referências: • The Perl Language Home Page - http://www.perl.com/perl/ • SCG Software Archive - http://iamwww.unibe.ch:80/~scg/Src/ • Perl reference materials - http://www.geek-girl.com/perl/perl.html • Server Side Scripts - http://www.cosy.sbg.ac.at/www-doku/tools/bjscripts.html • Perl FAQ - http://www.cis.ohio-state.edu:80/text/faq/usenet/perl-faq/top.html 6.1 - CONSTRUINDO FORMULÁRIOS COM O FORM Para fazer formulário, você tem que colocar as TAGs <FORM> </FORM>. Todos os outros comandos, devem ficar dentro dessas TAGs. Ok?! 6.2 - ATRIBUTOS PARA FORM O elemento FORM pode conter dois atributos que determinaram para onde será mandada a entrada do FORM. Vejam como eles são: 6.2.1 - GET Esse atributo indica totalmente como o dado é passado para o script ou programa definido no atributo ACTION. www.businessmail.kit.net 11 6.2.2 - POST Aprendendo HTML Passa os dados para a entrada padrão dos sistema operacional. Vale a pena lembrar, que será mostrado, abaixo, um exemplo completo, de como fazer sua página com formulários. Também será dado um endereço, de um servidor, que processa os dados e os retorna via e-mail. Aí poderá ser lido normalmente. Agora será explicado como colocar os campos de dados, mas se não estiver entendendo, copie o exemplo, e só altere os dados, com o seu nome, e suas informações. 6.2.3 - INPUT A TAG <INPUT> especifica uma variedade de campos editáveis dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas de texto, etc.), o nome da variável associada com o dado da entrada, o alinhamento e o campo do valo mostrado. O atributo mais importante do INPUT é o NAME. Ele associa o valor da entrada do elemento. Por exemplo, quando você for receber os dados, já, processados, irá vir o name : =resposta dada pelo visitante. Outro atributo importante é o TYPE. Ele determina o campo de entradas de dados. Veja como se usa este atributo: <INPUT TYPE="TEXT" NAME="nome"> Para mudar o tamanho, da janela padrão, você tem que colocar o comando SIZE. Por exemplo: <INPUT TYPE"TEXT" NAME="nome" SIZE=8>(ou número desejado) Outro comando importante é o VALUE. Ele acrescenta uma palavra digitada no comando à janela. Por exemplo: <INPUT TYPE"TEXT" NAME="nome" SIZE=8 VALUE="texto."> Olhe como ficaria: 6.2.3.1 - TIPOS DE ELEMENTOS TYPE Você pode fazer várias coisas com o elemento TYPE. Por exemplo, para ser um campo de senha, que quando digitado, apareça o símbolo "*", ao invés das letras, você deve escrever o seguinte: <INPUT TYPE"PASSWORD" NAME="nome" SIZE=8> 6.2.3.1.1 - TYPE="RADIO" Quando o usuário deve escolher uma resposta em uma única alternativa, de um conjunto, utiliza- se o RADIOButtons. Um exemplo típico do uso de tais botões, é cuja resposta pode ser SIM ou NÃO. É preciso que todos os rádios buttons es um mesmo grupo, ou seja, referentes a mesma pergunta, tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos NAME e VALUE, são necessários. Veja a seguir: <INPUT TYPE="RADIO" NAME="você gostou dessa home page?" VALUE="sim">sim<p> <INPUT TYPE="RADIO" NAME="você gostou dessa home page?" VALUE="nao">não<p> Repare: 6.2.3.1.2 - TYPE="PASSWORD" Este comando serve para fazer uma campo de senhas! Quando a pessoa digitar, aparecerá o sinal de "*"! O comando é: www.businessmail.kit.net 12 Aprendendo HTML www.businessmail.kit.net 15 <option value="Onde divulgar">Onde Divulgar</option> <option value="Bombas em Java Script">Bombas em Java Script</option> <option value="Contadores de Acesso">Contadores de Acesso</option> <option value="Organizando às informações">Organizando às informações</option> </select><P> Deixe seus comentários sobre a minha Home Page:<textarea name="Comentários" cols="28" rows="5"></textarea><br> O que está faltando? <input type="Text" name="O que está faltando?"Value="o que falta?"><br> Essa Home Page lhe ajudou?<input type="Radio" name="Ajudou?" value="sim">Sim <input type="Radio" name="Ajudou?" value="Não!">Não!<p> <input type="Submit" value="Enviar "> <input type="Reset" value="Limpar Dados"> 7. Frames Os FRAMES são divisões de telas do seu browser que permite a utilização de vários documentos no formato HTML. Os FRAMES são visualizados pelo Netscape Navigator, e pelo Internet Explorer. 7.1 - ESTRUTURA Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram no lugar do corpo, substituindo o <BODY></BODY> por <FRAMESET></FRAMESET>. Exemplo: <HTML> <HEAD> <TITLE> Título do Documento </TITLE> </HEAD> <FRAMESET> Sintaxe dos Frames </FRAMESET> </HTML> 7.2 - SINTAXE Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de FRAMES, no caso chamado de Frame1.htm. <HTML> <HEAD> Aprendendo HTML www.businessmail.kit.net 16 <TITLE> Frame 1 </TITLE> </HEAD> <BODY> <FONT SIZE=+1> <B> Frame n1 </B> </FONT> </BODY> </HTML> 7.3 - FRAMESET A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS. 7.3.1 - ROWS Especifica o numero de FRAMES e a altura de cada um. Exemplo: <FRAMESET ROWS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50% da tela (ambos em altura). 7.3.2 - COLS Especifica o numero de FRAMES e a largura de cada um. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50% da tela (ambos em largura). 7.4 - FRAME A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING, NORESIZE, TARGET. 7.4.1 - SRC Especifica o documento de formato HTML chamado para o FRAME. Indispensável, por que sem ele só o documento aparecerá vazio, só com as divisões. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM"> Aprendendo HTML www.businessmail.kit.net 17 <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> 7.4.2 - NAME Especifica o nome do documento de formato HTML chamado para o FRAME. É extremamente necessário para o uso do TARGET, que será visto a seguir. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM" NAME="Principal"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> 7.4.3 - SCROLLING Define se o Frame terá barr de rolagem, o default é Auto. Fornece as opções: Yes, No, Auto. Yes - Exibe a barra de rolagem independente do tamanho do documento. No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho especificado. Auto - Só exibe a barra de rolagem se o documento for maior que a área especificada. Exemplo: <FRAMESET COLS="20%,30%,50%" <FRAME SRC="FRAME1.HTM" SCROLLING="no"> <FRAME SRC="FRAME1.HTM" SCROLLING="yes"> <FRAME SRC="FRAME1.HTM" SCROLLING="auto"> </FRAMESET> 7.4.4 - NORESIZE Impossibilita o usuário de mudar o tamanho da área especificada do FRAME. Por default o usuário pode mudar esta área. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM" NORESIZE> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> 7.4.5 - TARGET Define qual a área (FRAME) que aparecerá o documento especificado pelo link. Mais útil na utilização de Menus e índices. Aprendendo HTML www.businessmail.kit.net 20 9. Caracteres Especiais Á &Aacute; á &aacute; Â &Acirc â &acirc; À &Agrave; à &agrave; Å &Aring; å &aring; Ã &Atilde; ã &atilde; Ä &Auml; ä &auml; Æ &AElig; æ &aelig; É &Eacute; é &eacute Ê &Ecirc; ê &ecirc; È &Egrave; è &egrave; Ë &Euml; ë &euml; Ð &ETH; ð &eth; Í &Iacute; í &iacute Î &Icirc; î &icirc; Ì &Igrave; ì &igrave; Ï &Iuml; ï &iuml; Ó &Oacute; ó &oacute; Ô &Ocirc; ô &ocirc Ò &Ograve; ò &ograve; Ø &Oslash; ø &oslash; Õ &Otilde; õ &otilde; Ö &Ouml; ö &ouml; Ú &Uacute; ú &uacute; Û &Ucirc; û &ucirc; Ù &Ugrave; ù &ugrave; Ü &Uuml; ü &uuml; Ç &Ccedil; ç &ccedil; Ñ &Ntilde; ñ &ntilde; < &lt; > &gt; & &amp; " &quot; ® &reg; © &copy; Ý &Yacute; ý &yacute; Þ &THORN; þ &thorn; ß &szlig; º &#186; ª &170; ¹ &#185; ² &#178; ³ &#179; ƒ &#131; † &#134; ‡ &#135; ‰ &#137; ¢ &#162; £ &#163; « &#171; ± &#177; » &#187; · &#183; ¼ &#188; ½ &#189; ¾ &#190; ¿ &#191; × &#215; ÷ &#247; ¡ &#161; ¤ &#164; Aprendendo HTML www.businessmail.kit.net 21 10. Imagens Clicáveis Você já deve ter reparado que algumas home pages possuem imagens que não são simples figuras decorativas, existe um tipo de imagem que é sensível ao clique de mouse e funciona como uma plataforma de lançamento para diversos links de hipertexto. Uma excelente utilização para esse tipo de imagem, é por exemplo na criação de barras de navegação - muito comuns na Web. Não seria interessante se pudéssemos criar regiões clicáveis independentes, onde cada uma delas nos levasse a documentos distintos? Mas como será que isso é feito? Com certeza você deve estar pensando que isso é uma tarefa para experts, mas está muito enganado! Chegou a hora de adicionar esse recurso à sua home page, mas como não queremos que você saia por aí sem saber o que está fazendo, que tal primeiro entendermos um pouco melhor como tudo isso funciona? 10.1 - MÉTODOS QUE TORNAM SUA IMAGEM SENSÍVEL Existem dois métodos para tornar uma imagem sensível em determinada região, ou de outra forma, métodos para a construção de "mapas de imagens" - os Mapas Locais de Imagens (Client-Side Image Maps) e o Mapa Remoto de Imagens (Server- Side Image Maps). A escolha entre um ou outro pode ser feita após analisarmos suas características principais. A diferença básica entre os dois métodos é clara e extremamente importante. O mapa remoto é uma combinação de CGI (Common Gateway Interface), HTML e um "arquivo de mapa" que nada mais é do que um arquivo que informa as regiões sensíveis da imagem e que reside no servidor de Web. Este método funciona da seguinte maneira: Quando você clica sobre uma região sensível de uma imagem, o browser fornece ao servidor de Web as coordenadas (x,y) de onde você clicou. O servidor procura no arquivo de mapa daquela imagem, qual a URL (Uniform Resource Locator) que corresponde a região clicada, e envia essa URL de volta para o browser, que se encarrega de solicitá-la e mostrá-la em sua tela. Por outro lado, quando você utiliza um mapa local de imagem (Client-Side Image Maps), todas as informações que definem o mapa das regiões sensíveis da imagem estão dentro do próprio código HTML da página que está sendo mostrada na sua tela, e com isso não há necessidade de recorrer ao servidor para identificar as coordenadas de um clique. Economizamos um acesso ao servidor, e isso pode ser interessante… Então, podemos dizer que o mapa local de imagem produz uma melhor utilização da rede, gerando um tráfego menor, diminuindo a carga de pedidos para o servidor de Web e aumentando a performance do browser, já que o tempo de resposta fica reduzido ao pedido da URL. Não é tudo o que a gente quer? Então, esse será o método escolhido - Mapa Local de Imagem. 10.2 - SENSIBILIZANDO AS IMAGENS Aprendendo HTML www.businessmail.kit.net 22 Essa tarefa será dividida em duas partes, a criação do documento HTML e do mapa de imagem. Utilizando qualquer editor de sua preferência, adicione a imagem que deseja sensibilizar ao código HTML de sua página com o TAG <IMG SRC …>. Exemplo: <HTML> <HEAD> <TITLE> Imagens sensíveis à cliques de mouse </TITLE> </HEAD> <BODY> <H3>Exemplo de imagem sensível ao clique de mouse</H3> <BR> <IMG SRC="exemplo.gif" BORDER="0" > </BODY> </HTML> Por enquanto nada de muito novo, não é? Então vamos passar para a parte "mais nobre" - a construção do mapa de imagens. Para essa tarefa, você vai precisar de um software especial conhecido como "MAPEDIT", para definir as regiões sensíveis da imagem. Vá até http://www.boutell.com/mapedit/#download, e escolha a versão mais adequada para você - Windows 95, Windows 3.1, etc… Em nosso exemplo iremos utilizar a versão de 32 bits para Windows 95. Após descompactar o software, execute-o. A primeira tela que surgirá para você será "Open/Create Map". Clique no botão "Browse…" ao lado de "Map or HTML File", para localizar o arquivo HTML editado anteriormente - em nosso exemplo exemplo.htm. Ao selecionar o arquivo, uma nova janela surgirá com a lista de todas as imagens inseridas no documento HTML - em nosso exemplo só inserimos uma, exemplo.gif. Posicione o cursor sobre o nome da imagem que deseja sensibilizar e clique "Ok". Observe que a primeira janela mostrada, está agora preenchida com todas as informações necessárias. Clique "Ok" e a imagem escolhida será apresentada para você. Chegamos ao momento mais importante - associar áreas da imagem às URLs. Você pode optar por várias ferramentas na hora de marcar a região a ser sensibilizada - retângulos, círculos ou polígonos. O ideal é que escolha a que melhor se adapte ao formato da área a ser mapeada. Estando com a ferramenta selecionada, vamos começar a definir as regiões - os quatro botões da barra de navegação, procura, comentário, correio e internet.br. Marque a área do primeiro botão mantendo o mouse clicado, solte-o e em seguida dê um clique. Surgirá uma janela "Object URL". Em "URL for clicks on this objects", informe a URL associada à esta área. Na verdade, o que irá acontecer é que quando essa região - que agora funciona como um botão - for clicada, a página referente a URL fornecida será carregada. Repita a operação para todos os outros botões que queira associar à URLs. Pronto, seu mapa está criado! Você pode salvá-lo acessando o menu "File", opção "Save" e observe que em "Save As format" a opção "Client Side Map (HTML)" deverá estar selecionada. O MAPEDIT adicionará algumas linhas ao seu código HTML, e a versão final dele deverá ser algo mais ou menos como o mostrado abaixo: Aprendendo HTML www.businessmail.kit.net 25 • ACDsee v1.31 HomePage: http://vvv.com/acd/ Descrição: Visualizador de gráficos. Suporta GIF, JPG, TIFF, BMP e outros. • Acrobat Reader v2.1 HomePage: http://www.adobe.com/Acrobat/AcrobatWWW.html Descrição: Visualizador de arquivos .PDF • Gif Construction Set for Windows v1.0L HomePage: http://www.mindworkshop.com/alchemy/gifcon.html Descrição: Aplicativo para criar arquivos GIF Animados • Graphic Workshop For Windows HomePage: http://www.mindworkshop.com/alchemy/alchemy.htm Descrição: Um dos melhores visualizadores de gráficos for Windows. • Graphx Viewer v1.51 HomePage: http://www.group42.com Descrição: Um ótimo programa manipulador de gráficos • LView Pro v1.b1 For Windows HomePage:http://world.std.com/~mmedia/lviewp.html Descrição: ótimo editor de gráficos. JPG, GIF, PCX, BMP, TIFF, etc. • Paint Shop Pro v3.11 for Windows HomePage: http://www.jasc.com Descrição: Manipulador de gráficos. Semelhante ao Adobe PhotoShop. • WebImage v1.72 for Windows HomePage: http://www.group42.com Descrição: Programa para fazer Gif transparente e mapeamento. Ótimo! 12.2 - EDITORES HTML • Aardvark Pro v2.11 HomePage: http://www.fbs.aust.com/aardvark.html Descrição: Um bom editor HTML com várias funções. • Alchemy v1.0b for Windows HomePage: http://www.stormsurge.com/alchemy/ Descrição: Editor HTML, mais um programa de FTP e Telnet. • Arachnid HTML Editor HomePage: http://rhwww.richuish.ac.uk/resource.htm Descrição: Um editor de HTML que suporta as mais utilizadas TAGs • Dida v1.50 HomePage: http://home.netvigator.com/godfreyk/dida/ Descrição: Bom editor HTML com um preview próprio • FleXed v1.5d for Windows HomePage: http://www.infoflex.com.au/flexed.htm Aprendendo HTML www.businessmail.kit.net 26 Descrição: Ótimo e flexível editor HTML, com um próprio preview de FRAMES, formulários... • Gomer v1.4 HomePage: http://www.clever.net/gomer/ Descrição: Tudo o que você esperava de um editor, pequeno e ótimo • Hot Dog Web Editor Prefessional v2.53 HomePage: http://www.sausage.com/ Descrição: O mais fácil e melhor editor HTML! Faça tudo o que puder! 13. Hospedagem A Sede Internet (http://www.sede.com) fornece os melhores serviços de hospedagem de páginas web. Pela Sede você pode adquirir todos os recursos necessários para manter uma home- page no ar. Estes recursos podem ser: mais espaço para armazenagem da página (megabytes) e até a possibilidade de rodar seus próprios cgis no ar ou até utilizar os cgis pré-configurados que a Sede coloca ao seu dispor. Outro recurso excepcional é o de domínio próprio. Com ele, você pode obter um novo, personalizado e simplificado endereço no tipo www.nome.com ou www.nome.com.br. Para obter mais informações sobre os outros serviços da Sede, consulte a sua home-page. Aprendendo HTML www.businessmail.kit.net 27 14. Glossário Aqui você encontra as palavras mais utilizadas na Internet com seus significados. Caso deseje fazer uma pesquisa no Nestcape 3.0 pressione CTRL + F ou no Menu Edit/Find.. - A - Administrador de Rede - Toda rede de computadores tem uma pessoa responsável por toda a estrutura e funcionamento: o administrador da rede. Esse administrador é quem vai definir a que recursos da rede cada pessoa terá acesso. Aprendendo HTML www.businessmail.kit.net 30 Flame (em chamas) - Usado para a postagem de mensagens provocativas ou polêmicas, podendo causar conseqüências negativas. O usuário que envia essas mensagens é conhecido por flamer. Freenet (rede livre) - Organização que provê acesso livre à Internet para pessoas de uma determinada área, geralmente através de bibliotecas públicas. Freeware - Software disponível sem qualquer custo. FTP (File Transfer Protocol) - Sistema de transferência de cópias de arquivos de um computador para outro na Internet. FTP anônimo - É o uso do protocolo FTP em localidades conectadas à Internet que oferecem acesso público aos seus arquivos, sem a necessidade de identificação ou senha. - G - Gateway - Um dispositivo que conecta redes que normalmente não se comunicam, permitindo a transferência de informação de uma para outra. GIF (Graphics Interchange Format) - Tipo de arquivo de armazenamento de imagens, desenvolvido pela Compu Serve e amplamente difundido na Internet. Esses arquivos são identificados pela extensão .gif. Gopher - Meio de navegação através de menus. Ferramenta muito usada com a função de localizar e recuperar arquivos na Internet. O nome "gropher" é proveniente do mascote da Universidade de Minnesota, local onde o projeto foi desenvolvido, Pai do Web. GUI (Interface Gráfica ao Usuário) - Interface que une ícones e funções para realizar tarefas e facilitar a vida do usuário. Gzip - Tipo de compressão de arquivos, funciona como o usual zip. - H - Hacker - É uma pessoa que tem prazer em conhecer profundamente o funcionamento interno dos sistemas, computadores e redes de computadores. A quebra de segurança de computadores é para Hacker apenas um desafio. Este termo geralmente é empregado de maneira pejorativa, onde o correto seria "Craker". Header (cabeçalho) - A parte de um pacote que precede os dados e que contém a fonte, o destino e o endereço, cabeçalho também é a parte de uma mensagem eletrônica que traz, entre outras coisas, o remetente, dia e hora. Hipertexto - Um tipo de texto que permite o uso de ligações (links) para outros documentos ou para partes do mesmo documento. Host - Um computador que está ligado à uma rede ou à Internet. Quando você se conecta a ele, passa a ter acesso a arquivos e informações. HTML - Hypertext Makup Language Linguagem padrão baseada em texto utilizada para escrever todos os documentos de hypertexto do World Wide Web. HTTP - Hyper Text Tranfer Protocol Protocolo de comunicação utilizado no World Wide Web. Hytelnet - Banco de dados sempre atualizado, que fornece informações sobre localidades Telnet específicas e ajuda a conectá-las. - I - Infobahm - O mesmo que super-rodovia de informações ou super infohighway. Internauta - Nome dado ao usuário da Internet. Internet Protocol (IP) - Protocolo de comunicação que forma a base da Internet. Aprendendo HTML www.businessmail.kit.net 31 InterNIC - Significa "Internet Information Center". Produz dados estatísticos da Rede e também é o responsável pelo registro de um novo domínio na Internet. IP Address (Internet Protocol Address) - É a identificação numérica dos computadores definida pelo protocolo IP. Toda máquina que faz parte da Internet possui um único e exclusivo endereço IP. IRC (Internet Relay Chat) - Sistema interativo no qual os usuários da Internet podem conversar (através do teclado) em tempo real. Depois do e-mail é o serviço mais popular da Internet. Existem várias opções de canais, proporcionando maior privacidade. ISDN (Integrated Services Digital Networks) - Uma tecnologia que combina voz e serviços de redes digitais em uma mesma linha. Possibilita conexões de alta velocidade à Internet. ISOC (Internet Society) - Uma organização que estuda e estimula a evolução da Internet. O ISOC também ajuda a promover o desenvolvimento de novas aplicações, publicando notas e artigos. - J - Java - Considerada por muitos como a grande revolução do WWW, Java é uma linguagem de programação orientada a objetos, que permite o uso de interatividade nas páginas de Web. - K - K - Significa "sobre 1.000", derivado do Grego kilo. Por exemplo, 8.6K significa, aproximadamente, 8.600 caracteres. - L - LAN (Local Area Network) - É uma rede local de computadores, que permite que os usuários troquem informações e compartilhem recursos como impressoras ou MODEMS. A grande maioria das empresas atualmente possui um LAN que também está conectada à Internet. Listas de discussões, Grupos de discussões - As discussões são carregadas nas mensagens de correio eletrônico para respostas automáticas, que enviam uma cópia de cada mensagem enviada pelo correio eletrônico para qualquer um que tenha assinado a lista para discussões particulares de grupo. Linha dedicada - Linha telefônica Digital de Alta Velocidade que fica permanentemente ligada entre dois lugares. Linhas dedicadas são encontradas freqüentemente em conexões de tamanho moderado a um provedor de acesso. Listserv - Programa que fornece o processamento automático de muitas funções envolvidas com as listas de correspondência (grupos de discussões). O envio, através do correio eletrônico, de mensagens apropriadas para esse programa automaticamente o inscreve (ou cancela a inscrição) como usuário de uma lista de discussão. O listserv também responde solicitações de índices. FAQs, arquivos das discussões anteriores e outros arquivos. LOGOFF - É o processo de desconexão de um sistema on-line. LOGIN - É um processo para sua identificação em um sistema. Toda vez que você se conecta a algum site este processo se realiza, sendo geralmente composto de duas etapas. Primeiro você fornece o nome através do qual você é conhecido na rede (username), e depois informa a sua senha (password). Lurkers - É como são chamados os participantes não-ativos de grupos como Usenet Newsgroup, Mailing List e IRC; quer dizer, somente "ouvem", não participam Aprendendo HTML www.businessmail.kit.net 32 ativamente das discussões . No CU-SeeMe os "lukers" são os participantes que não possuem câmeras. - M - Mailbox - É a área que armazena as mensagens eletrônicas recebidas. Mailing list MIME (Multipurpose Internet Mail Extensions) - É um aperfeiçoamento dos padrões do sistema de correio da Internet, que possui a habilidade de transferir dados não textuais como gráficos, áudio e fax e permite que se envie mensagens com a acentuação em português. Mirror Site - Sites que são réplicas de outros muitos populares. O uso de "Mirror Sites" é incentivado, pois distribui melhor o tráfego na Rede. Geralmente, a escolha de um site perto de você é garantia de melhores taxas de transferência, sendo assim, procure saber se aquele super site que você sempre visita não possui um espelho no Brasil. Modem - Um dispositivo que transforma sinais analógicos em digitais vice- versa. O nome MODEM, na verdade é uma sigla para MOdulador DEModulador. Mosaic - Interface gráfica que atua como um software-cliente para o FTP, gopher, Usenet News, WAIS e WWW. "Pai" do Netscape. - N - Net - Abreviação para Internet. Netiquette (Netiqueta) - Uma combinação das palavras "Net"e "etiquette". São padrões de bom comportamento utilizados na Internet. O conceito básico da "Netiquette" é que existem pessoas reais do outro lado da máquina, sendo assim, comentários ou atitudes desagradáveis são tão ofensivos quanto se estas estivessem na sua frente. Netscape Navigator Personal Edition - é um conjunto de softwares gráfico que conecta você a um provedor de acesso a rede Internet e lhe garante fácil acesso a Internet e ao Word Wide Web. Newbie - O mesmo que novato na Internet. Newsgroup Usenet (Netnews) - São grupos de discussões que usam software newsreader e servidores. NNTP (Network News Tranfer Protocol) - Padrão usado para a troca de mensagens dos usuários da Usenet na Internet. Nó (Node) - Um computador que está conectado a uma rede. - O - On-line - Termo que significa estar no sistema, estar conectado a algum lugar. Daí surgem as revistas e bancos on- line. - P - Pacote (Packet) - Unidade padrão para representar os dados enviados pela rede. Uma informação é sempre dividida em pequenos pacotes. Paginadores - Aplicações clientes que permitem a visualização de páginas WWW. Par trançado - Cabo produzido por pares de fios de cobre trançados uns aos outros fazendo com que se cancelem os efeitos de ruídos elétricos.