Professor rogerio-apostila

389 visualizações

Publicada em

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
389
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Professor rogerio-apostila

  1. 1. HTML Avançado Sobre Essa apostila foi criada e desenvolvida por Alexandre Zannella Gorian (e-mail:azg@terra.com.br), utilizando como referências bibliográficas o livro “HTMLAvançado” do autor Ramalho (editora Makron Books), a matéria “Cascading StyleSheets” do autor Paulo Cândido (publicada no site do provedor Terra, no canalEstiloweb, pelo endereço www.terra.com.br/estiloweb/webdesign/ccs0.htm), a apostila“Manual JavaScript” do autor “Luís Carlos de Andrade Rodrigues (e-mail:dricci@uninet.com.br) e no guia de referência a Java Scripts da Netscape(www.netscape.com). Apostila criada para aula de HTML Avançado, introdução à CSS e à Java Script,é de livre distribuição, reservando ao autor os direitos autorais.Dedicatória Os agradecimentos são direcionados para Eric Loque Xavier, para oswebdesigners Jovani Aguiar Lage e Rodrigo Marçal da Silva e Silva pela força nasmatérias, para minha namorada Giselle Shunck Vieira e meus pais, pela compreensãodos esforços desprendidos e para todos que acreditam que a Internet é um meio onde atransferência de informações deva ser de forma gratuita.A quem serve esta apostila Esta apostila foi desenvolvida para pessoas leigas em codificação HTML, CSS eJava Script, tendo um linguajar simples e de fácil compreensão no início, e aumentandoo grau técnico no decorrer dos capítulos, uma vez que os tópicos compreendidos nosprimeiros capítulos não são repetidos ou explicados com tantos detalhes nos capítulosseguintes. Pessoas com algum conhecimento de HTML, CSS e Java Script e/ou deferramentas de desenvolvimento de páginas HTML podem usar esta apostila como umguia de referência de objetos, tags, atributos, eventos, e outras características presentesnessas linguagens.Estruturação Esta apostila está dividida basicamente em três partes e em três apêndices. Aprimeira parte é reservada para o ensinamento do HTML avançado, como todas suastags, os atributos mais usados e outros detalhes que são úteis para construção de sites. A segunda parte é dedicada à folhas de estilo. Foi abordada a versão 1 desserecurso, por ser a mais utilizada. A terceira parte é uma introdução à linguagem Java Script, tendo em seuconteúdo instruções básicas para entendimento dessa linguagem.Alexandre Zannella Gorian (azg@terra.com.br) 2
  2. 2. HTML Avançado Primeira Parte HTML – Tudo começa aquiAlexandre Zannella Gorian (azg@terra.com.br) 3
  3. 3. HTML Avançado 1. Introdução 1.1. Breve histórico A Internet surgiu em 1969, na Arpanet (advanced research projects agency). Aidéia inicial era criar uma rede de pacotes para conectar centros de pesquisas eprocessamentos geograficamente distantes. Pela sua arquitetura, os dados poderiam chegar a seu destino por várioscaminhos ou nós da rede. Dessa forma seria possível os computadores do exército secomunicarem com os da universidade, por exemplo. Em 1970 foram implementados os switches de pacote, foi padronizado o TCP/IPe logo a seguir foram implementados os roteadores nos nós da rede. Com o surgimento do correio eletrônico e da WWW na década de 80, a Internetse populariza, tornando o acesso disponível tanto para grandes corporações quanto parausuários residenciais. O acesso à Internet é feito principalmente através de modems (o que a tornaextremamente lenta) e de canais dedicados. Novas tecnologias (como o radio e TV àcabo) começam a aparecer, embora com preços ainda elevados. Com o desenvolvimento de novas tecnologias de programação Web, dá-se inícioà uma nova “febre”: o e-commerce. Movimentando na base de bilhões de dólares porano, as empresas chamadas de .COM conseguiram um rápido e lucrativo crescimento devendas, uma vez que pessoas do mundo todo podem ter acesso a elas sem custoadicional. Devido ao sucesso da Internet e seu baixo custo, surgiram dois novos termos nomercado: a Intranet e a Extranet. A Intranet se caracteriza por um servidor Web e váriasestações de trabalho, dentro de uma empresa. Com funcionamento parecido com aInternet comum, cada máquina cliente acessa o servidor em busca de dados, o servidorenvia o código à máquina correspondente e esta o processa. A diferença para a Extraneté que esta pode ser acessada também fora da rede da empresa, ou quando se tem duasIntranets se comunicando. É como se fosse uma Internet limitada à quem pode teracesso, e sendo disponível apenas as páginas da empresa. 1.2. Funcionamento O funcionamento se divide basicamente em dois tipos de programas: o cliente eo servidor. O cliente é quem interpreta as páginas. O servidor, por sua vez, fica Sencarregado de hospedá-la e, com as novas tecnologias (como o Cold Fusion e o ASP),do processamento da informação solicitada pelo cliente, entregando para esse o códigoHTML pronto.Alexandre Zannella Gorian (azg@terra.com.br) 4
  4. 4. HTML Avançado Figura 1.1 – Relacionamento cliente-servidor Web A informação na Web é gravada no formato de páginas, que podem contertextos, hipertextos, sons, imagens, vídeos e até programas. O código dessa página échamado de HTML, o que, erroneamente é chamado por alguns de linguagem deprogramação. Na verdade ela é uma linguagem de marcação, ou em outras palavras,uma linguagem a nível de interface. A linguagem de programação utilizada pode se daratravés de Scripts (JavaScript, VBScript), de applets (Java), de ActiveX, ou outros tiposrecentes de programação para Web. A transferência de dados entre o servidor e o cliente se dá através do protocoloTCP/IP. O tipo de transferência é feito principalmente através do protocolo HTTPembora seja muito utilizado também o FTP e, em menos escala, o Gopher, o telnet, oWais, dentre outros. 1.2.1. Navegador Navegador é o programa que recebe o código do servidor e o transforma em algointerpretável pelo usuário. Geralmente gratuitos, existem em várias tipos, dentre eles:• Microsoft Internet Explorer: navegador que vem sendo muito utilizado, principalmente por já vir instalado no Windows 98 e no 2000. Tem como principal característica uma interface amigável e de fácil utilização. Outra característica é a interpretação de estilos, o que permite se fazer um site mais elaborado sem precisar colocar muitas figuras, além da interpretação de VBScripts. Como ponto fraco destaca-se a baixa segurança (principalmente na parte de e-mail). Programa gratuito.• Netscape: presente na forma de Communicator e Navigator (este trás apenas o navegador), é muito utilizado no exterior. Apresenta uma interface de fácil utilização e um programa de e-mail também muito bom. Ponto forte no desenvolvimento de JavaScripts, e no gerenciamento de perfis de usuários. Deixa um pouco a desejar no desenvolvimento de estilos e na linguagem VBScript. Outra característica é que ele lê a tabela completa para depois mostrá-la na tela, o que acarreta um carregamento mais rápido que o Internet Explorer.• NCSA Mosaic: navegador que foi base para os demais navegadores. Não foi atualizado depois da versão 3.0, uma pena. Existem outros tipos de navegadores, como o Opera, que geralmente sãoprogramas que devem ser pagos para a utilização autorizada. 1.2.2. URL (Uniform Resource Locator) É o endereço do servidor, o diretório e o arquivo correspondente à página ousite. Por exemplo:Alexandre Zannella Gorian (azg@terra.com.br) 5
  5. 5. HTML Avançado http://www.terra.com.br/estiloweb/index.htm Onde:• http:// é o tipo de protocolo utilizado;• www indica que é um site (ou página) da World Wide Web. O uso vem caindo, uma vez que é mais fácil a não utilização desse nome. Por exemplo: http://av.com;• terra.com.br é o domínio do servidor, por trás dele existe o endereço IP;• /estiloweb é o diretório dentro do servidor. Pode ser criado um domínio para esse diretório, como por exemplo estiloweb.com.br;• index.htm é o nome da página que será aberta. Note que não é necessário digitar o http://, pois o navegador o trásautomaticamente. No caso do Internet Explorer 5.0, ele detecta se é ftp ou http também. A maioria dos servidores trás a página principal sem a necessidade da digitaçãoda mesma, como por exemplo www.terra.com.br/estiloweb, onde o navegador adicionao http:// na frente e o servidor já mostra a página index.htm automaticamente.Alexandre Zannella Gorian (azg@terra.com.br) 6
  6. 6. HTML Avançado 2. Formato de uma página Uma página Web não é nada mais do que um simples documento texto, commarcações de tipos de texto, figura, sons, etc. Sendo assim, de qualquer computadorcom um simples editor de texto pode sair uma página das mais belas possíveis. Vaidepender mais da criatividade e do domínio sobre um programa de edição gráfica doque propriamente uma ferramenta de desenvolvimento (mas é claro que ajuda, e muito). Uma página pode apresentar-se de formas diferentes dependendo do navegador,uma vez que fica a cargo deste complilá-la. Por isso, cuidado com a formatação e comos recursos utilizados, é normal uma página ficar boa no Explorer e um desastre noNetscape ou um recurso utilizado no Netscape não funcionar no Explorer. Exemplo de uma página: <HTML> <HEAD> <TITLE> Minha primeira página </TITLE> </HEAD> <BODY> <H1> Titulo 1 </H1> <P>Aqui se localiza um texto <P><H2>Titulo 2 </H2> <P>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Essa &eacute; uma pequena demonstra&ccedil;&atilde;o de uma p&eacute simples. <br> Com certeza voc&ecirc; deve ter notado algo diferente nela... mas n&atilde;o se preocupe, voc&ecirc; saber&aacute; o que significam. Veremos agora:<P> <UL> <LI> o que s&atilde;o tags; <LI> formato b&aacute;sico de uma Home-Page. <LI> T&eacute;cnicas de programa&ccedil;&atilde;o &uacute;teis; </UL> <P><HR> <P align=“Center”> Abra&ccedil;os </BODY> </HTML> O resultado apresentado por um navegador seria o seguinte:Alexandre Zannella Gorian (azg@terra.com.br) 7
  7. 7. HTML Avançado Figura 1.2 – Página apresentada pelo navegador Procure não utilizar acentuação no seu texto, uma vez que, dependendo dalinguagem do navegador do usuário, pode não aparecer aquele caracter desejado, e simoutro interpretável. Para evitar isso, utilize a tabela de códigos (veja Apêndice A). 2.1. Tags São marcações de identificação de algo que existe na página. São escritas entreos sinais de menor (<) e maior (>), e o fechamento dessas tags se dão através da barra(/). Por exemplo, a tag que identifica o título 1 no documento se escreve <H1> e, paraidentificar onde o título termina é colocada a tag </H1>. A tag pode ser escrita com letramaiúscula ou minúscula, e pode-se colocar tags dentro de campos que por sua vez estãoem outra tag. Um exemplo prático: dentro de uma tabela, coloca-se linhas e colunas,fecha-se as colunas e linhas e depois a tabela. Caso seja digitada uma tag inexistente, onavegador irá ignorá-la, sem apresentar ao usuário. Nos próximos capítulos serão apresentadas e explicadas as tags existentes. 2.2. Formato básico de uma página HTML Como dito anteriormente, as páginas da Web são arquivos textos com asmarcações próprias da linguagem, a única diferença é que ao invés de arquivo .TXT, aspáginas são normalmente salvas como .HTML ou .HTM. Os novos navegadorespermitem que a página seja salva com extensões diferentes, mas não é recomenda autilização que não sejam as duas primeiras.Alexandre Zannella Gorian (azg@terra.com.br) 8
  8. 8. HTML Avançado Toda pagina HTML começa com a tag <HTML> e termina com </HTML>, oque fará com que o navegador saiba que se trata de um documento HTML e não deoutro tipo de arquivo. Logo após a tag <HTML>, coloca-se a tag <HEAD>(cabeçalho), onde conterá informações da página, como título, descrição, conteúdo eoutros assuntos. Essas informações não serão apresentadas ao usuário (com exceção dotítulo). Terminado o cabeçalho, inicia-se o corpo da página, que conterá o conteúdoapresentável da página. O corpo é aberto com <BODY> e fechado com </BODY>. Aestrutura básica de uma página seria: <HTML> <HEAD> <TITLE>Aqui se insere o título da página </TITLE> aqui são colocados estilos, scripts, conteúdo, etc. </HEAD> <BODY> Aqui se insere o conteúdo da página (textos, tags, etc.). </BODY> </HTML> 2.3. Técnicas básicas de programação Para facilitar a confecção e manutenção de uma página, é importante seguiralgumas normas básicas, que poderiam chamar até de bom senso, por exemplo:• manter cada código em sua linha respectiva. Por exemplo: o que será exibido em várias linhas ou células, coloque também em várias linhas no código. Assim, quando tiver que localizar algo no código, essa localização se dará de uma forma mais fácil;• coloque as tags em início ou final de frase, assim fica bem mais fácil de localizá-las;• respeite a indentação do texto, ou seja, coloque as tags que tiverem dentro de outra em níveis mais a direita, assim fica mais fácil saber onde começa e onde termina essas tags (ou códigos);• coloque comentários no texto, assim numa atualização futura você saberá o que aquilo quer dizer.Alexandre Zannella Gorian (azg@terra.com.br) 9
  9. 9. HTML Avançado 3. Parágrafos e Quebras de Linha Uma página HTML nem sempre sai da forma que se digita em seu código, paraisso deve-se colocar tags especiais indicando onde começa um novo parágrafo ou umanova linha. 3.1. Quebra de linha Para iniciar uma nova linha, dentro de um mesmo parágrafo, usa-se a tag <BR>.Por ser uma tag de inicialização de nova linha, não existe fechamento. 3.2. Parágrafos Para iniciar um novo parágrafo basta adicionar a tag <P> e digitar o texto. Amaioria dos editores HTML colocam o fechamento dessa tag, mas o mesmo não énecessário (exceto quando se quer separar o parágrafo inferior). A diferença para aquebra de linha é que um novo parágrafo possui um espaçamento diferente. Ex.: <HTML> <HEAD> <TITLE>Exemplo de Par&aacute;grafos</TITLE> </HEAD> <BODY> Primeiro par&aacute;grafo; <P> segundo par&aacute;grafo;<BR> segunda linha do segundo par&aacute;grafo;</P> <P> terceiro par&aacute;grafo. </BODY> <HTML> Note que independentemente do número de tags <P> utilizadas antes de umnovo parágrafo, será um novo parágrafo apenas o que contiver caracteres. Para evitar-seisso, usa-se espaçamento em branco. Ex.: <HTML> <HEAD> <TITLE>Exemplo de Par&aacute;grafos</TITLE> </HEAD> <BODY> Primeiro par&aacute;grafo; <P><P><P><P> segundo par&aacute;grafo;<BR> segunda linha do segundo par&aacute;grafo;</P> <P>&nbsp;<P>&nbsp; <P> terceiro par&aacute;grafo. </BODY> <HTML> 3.2.1. Atributos Atributos de uma tag são propriedades que permitem a modificação de certascaracterísticas. Esses atributos são colocados dentro da tag de abertura. Estão listadasabaixo alguns atributos comuns aos navegadores Internet Explorer e Netscape, masalém dessas podem existir outras menos usadas.Alexandre Zannella Gorian (azg@terra.com.br) 10
  10. 10. HTML Avançado • Align: permite o alinhamento do parágrafo. Pode ser “left” para alinhamento esquerdo, “center” para central e “right” para direito. A partir dos navegadores de versão 4.0 começou a ser usada também a “justify”, para alinhamento justificado. O padrão de alinhamento é esquerdo. • Id: indica uma identificação para o parágrafo. Esse nome pode ser usado como referência para futuras modificações via scripts ou CSS, por exemplo. <html> <head> <title>Formata&ccedil;&atilde;o de par&aacute;grafo</title> </head> <body> <p align="center">Centralizado <p align="right">Direito <p align="justify"> Justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado </body> </html> Resultado:Alexandre Zannella Gorian (azg@terra.com.br) 11
  11. 11. HTML Avançado Figura 3.1 – Formatação de parágrafos Além de atributos existem eventos, como o OnClick, que são ações empregadasgeralmente pelo usuário. Esse e outros eventos serão vistos no capítulo de JavaScript. 3.3. Linha horizontal Pode-se separar trecho dentro de uma mesma página através da tag <HR>. 3.3.1. Atributos Apesar de ser de redimensionamento automático, pode-se usar atributosespeciais para uma melhor adequação às necessidades do site. • Width: define o comprimento da linha. Pode ser especificado em pixels ou através de porcentagem da tela. • Size: define a altura. Especificado em pixels; • Color: define a cor a ser usada; • Align: define o alinhamento. Pode ser “center” (padrão), “right” ou “left”. Ex.: <HTML> <HEAD> <TITLE>Exemplos de linhas horizontais</TITLE> </HEAD> <BODY> R&eacute;gua normal: <HR> Colorida, alinhamento direito: <HR align=”right” width=”300” color=”BLUE”>Alexandre Zannella Gorian (azg@terra.com.br) Outra forma: <HR align=”left” width=”50%” size=10> 12 </BODY> <HTML>
  12. 12. HTML Avançado Apresentação no browser: Figura 3.2 – Linhas horizontais 3.4. Centralização Uma outra forma de centralização de parágrafos é a utilização da tag <center>com seu devido fechamento. Ela é usada na maioria dos casos, por ser mais simples e defácil localização.Alexandre Zannella Gorian (azg@terra.com.br) 13
  13. 13. HTML Avançado 4. Tipos de Fonte Não existiria graça nas páginas se existisse apenas letras pretas de mesmotamanho e tipo de fonte. Para evitar essa monotonia e melhorar a qualidade visual é queexistem recursos como cabeçalhos, tipos de fonte, textos pré formatados, etc. 4.1. Cabeçalhos Os cabeçalhos (ou headings) são linhas com caracteres diferenciados do restantedo texto, usados geralmente para separar tópicos, títulos ou coisas afins, necessitando aespecificação de onde termina. A tag utilizada é <Hn> onde n é um número inteiro quevaria entre 1 e 6. Apesar dessa abrangência, são geralmente utilizadas a <H1>, <H2> epoucas vezes <H3>, as demais são tão pequenas que caíram em desuso. Como atributos, podemos citar mais uma vez o align e o title, com as mesmascaracterísticas do parágrafo. 4.2. Estilos de texto São informações de como o texto deverá ser apresentado (negrito, itálico, etc.).Assim como o cabeçalho, é do tipo liga-desliga, ou seja, deve-se utilizar o fechamento. Principais tipos:Tag Função<B> Negrito<I> Itálico<EM> Efeito idêntico ao itálico<U> Sublinhado<STRONG> Efeito idêntico ao negrito<TT> Espaçamento regular do texto<BIG> Aumenta a fonte e aplica negrito<SMALL> Diminui o tamanho da fonte<SUP> Formata o texto como sobrescrito<SUB> Formata o texto como subscrito Não é recomendado o uso da tag de sublinhado, pois o usuário poderá confundircom um link. 4.3. A tag <FONT> O texto pode receber também uma configuração de tipo de fonte ou cor diferenteda padrão, bastando para isso adicionar a tag <FONT> e seus atributos. É exigido ofechamento dessa tag. Como principais atributos podemos citar:Alexandre Zannella Gorian (azg@terra.com.br) 14
  14. 14. HTML Avançado • Color: informa a cor da fonte. Pode ser informada o nome da fonte em inglês ou sua cor no formato RGB hexadecimal; • Face: informa o tipo de fonte a ser utilizada. O nome da fonte deve estar escrito igual ao seu nome, para isso, use como auxílio um editor de texto. Podem ser especificadas várias fontes (será selecionada por ordem, ou seja, se o cliente não tiver a primeira, o navegador procura a segunda, e assim por diante), desde que separadas por vírgulas, mas lembre-se: se o cliente não tiver nenhuma dessas fontes, será apresentada a fonte padrão do navegador; • Size: especifica o tamanho da fonte em pixels (ex.: “12px”) ou em relação ao resto do texto (ex.: “-1” ou “2” – o padrão é 3); • Lang: apesar de pouco utilizada, esse atributo é pode ser útil quando se quer colocar caracteres de diferentes linguagens num texto (misturar brasileiro – br- com japonês – ja). 4.4. Texto pré-formatado Um texto pré-formatado é apresentado na tela na forma que foi escrito em seucódigo, sem a necessidade de colocar tags de parágrafos ou quebras de linha. A tag utilizada é <PRE>, e é obrigatório o uso do fechamento da tag. <html> <head> <title>Alteração de Fontes</title> </head> <body> <H1 align="center">Exemplo pr&aacute;tico de utiliza&ccedil;&atilde;o de fonte</H1> <p align="justify"><font size="26" color="red" face="Comic Sans MS, Arial, Times New Roman">A</font>gora iremos mostrar praticamente tudo o que vimos at&eacute; agora, como a utiliza&ccedil;&atilde;o de fontes, cabe&ccedil;alhos, par&aacute;grafos, etc.<BR> Ap&oacute;s tudo isso, ainda h&aacute; muita coisa a ser vista, principalmente porque esse &eacute; um mercado crescente de atualiza&ccedil;&atilde;o. <H2>Agora veremos o campo de pr&eacute;-formata&ccedil;&atilde;o</H2> <pre> Aqui você deve tomar muito cuidado, principalmente com espaçamentos e enters, para não ficar uma coisa muito separada da outra.</pre> Se ficar alguma <b>dúvida</b> ou <i>questionamento</i>, entrem em <b><i><u>contato</b></i></u>. </body> </html> A apresentação desse documento se daria dessa maneira:Alexandre Zannella Gorian (azg@terra.com.br) 15
  15. 15. HTML Avançado Figura 4.1 – Formatação de fonteAlexandre Zannella Gorian (azg@terra.com.br) 16
  16. 16. HTML Avançado 5. Listas de Marcadores A criação de listas pode ser útil para organizar o texto em tópicos, para enumeraritens, fazer um sumário ou outras atividades onde há a necessidade de se estruturar otexto. De fácil visualização ao internauta, pode ser usada para, por exemplo, demarcartextos que levam à outras seções no documento ou outras páginas. Esse tipo de tag, apresenta uma estrutura básica, onde se inicia a lista com umatag “mãe”, coloca-se os itens através de tags <LI> e, finalmente, fecha-se a tag “mãe”. Épossível também criar listas dentro de outras listas. Basicamente existem dois tipos de listas: as ordenadas e as não ordenadas. 5.1. Listas não ordenadas Lista não ordenadas são aquelas em que os marcadores são simplesmentesímbolos, ou seja, o marcador não é numerado. A tag de abertura desse tipo de lista é<UL> (unordered list). Ex.: <HTML> <HEAD> <TITLE>Exemplo de listas n&atilde;o ordenadas</TITLE> </HEAD> <BODY> <Font size="+2"><b>Exemplo de listas n&atilde;o ordenadas</b></font> <p><font size="+1">Lista simples:</font> <ul> <li>t&oacute;pico 1; <li>t&oacute;pico 2; <li>t&oacute;pico 3; </ul> <p><font size="+1">Lista aninhada:</font> <ul> <li>t&oacute;pico 1; <li>t&oacute;pico 2; <ul> <li>t&oacute;pico 2.1; <li>t&oacute;pico 2.2; </ul> <li>t&oacute;pico 3; </ul> </body> </html> A apresentação no browser se daria da seguinte forma:Alexandre Zannella Gorian (azg@terra.com.br) 17
  17. 17. HTML Avançado Figura 5.1 – Listas não ordenadas 5.2. Listas ordenadas Lista ordenadas são aquelas que apresentam numeração como marcadores. Aúnica diferença para a lista não ordenada é que o marcador é <OL> (ordered list). Ex.:Alexandre Zannella Gorian (azg@terra.com.br) 18
  18. 18. HTML Avançado <HTML> <HEAD> <TITLE>Exemplo de listas ordenadas</TITLE> </HEAD> <BODY> <Font size="+2"><b>Exemplo de listas ordenadas</b></font> <p><font size="+1">Lista simples:</font> <ol> <li>t&oacute;pico 1; <li>t&oacute;pico 2; <li>t&oacute;pico 3; </ol> <p><font size="+1">Lista aninhada:</font> <ol> <li>t&oacute;pico 1; <li>t&oacute;pico 2; <ol> <li>t&oacute;pico 2.1; <li>t&oacute;pico 2.2; </ol> <li>t&oacute;pico 3; </ol> </body> </html> Apresentação no browser: Figura 5.2 – listas ordenadasAlexandre Zannella Gorian (azg@terra.com.br) 19
  19. 19. HTML Avançado 5.3. Atributos Como principais atributos das listas, podemos citar: • Type: especifica o tipo de marcador a ser usado. Pode ser “disc” (disco), “circle” (círculo) e “square” (quadrado) na lista não ordenada. No caso da lista ordenada, os numerais podem ser configurados da seguinte forma: “1” para números comuns (padrão, não precisa ser especificado), “A” para ordem alfabética maiúscula, “a” para ordem alfabética minúscula, “I” para algarismos romanos maiúsculos e “i” para algarismos romanos minúsculos; • Start: válido apenas para listas ordenadas, especifica o padrão inicial de contagem. No caso dos marcadores (<li>), os principais atributos seriam: • Type: permite que se mude o tipo de marcador em qualquer ponto da lista. Note que todos os marcadores seguintes seguirão essa modificação. Os tipos que podem ser alterados dependem do tipo de lista; • Value: válido somente no caso de listas ordenadas, permite que se salte de um valor para outro (ex.: de 5 para 10 e depois para 7 e assim por diante). Note que os valores seguintes serão continuação dessa alteração.Alexandre Zannella Gorian (azg@terra.com.br) 20
  20. 20. HTML Avançado 6. Links Links são canais de ligação entre duas coisas. No caso de uma página http, linksservem de ligação à outras páginas, arquivos ou ainda à outros trechos dentro da mesmapágina. Essa capacidade do HTML facilita a vida do desenvolvedor no ponto em quepode-se dividir um documento muito extenso em outros menores, facilitando assim aleitura e agilizando o carregamento da página. Outro ponto interessante dessa propriedade é permitir o acesso à arquivos.Assim sendo, pode-se descrever o conteúdo ou ação do arquivo e disponibilizá-lo aointernauta, sem a necessidade de criar um FTP e solicitar que ele tenha que acessaroutro endereço para obtenção do arquivo. Porém, a propriedade mais interessante é a de poder ligar várias páginas devários sites em várias partes diferentes do mundo, criando-se assim uma teia, onde corretodo tipo de informação, formando-se assim a World Wide Web (teia de alcancemundial). Uma característica importante desse recurso é que a tag <a> não temfundamento nenhum se escrita em sua forma simples, pois não executará nenhumafunção. Para que se obtenha o desejado, é necessário usar alguns atributos, que irãotorná-la tão eficaz quanto o desejado. Devido haverem muitos atributos e serem um pouco complexo na aprendizagem,o conteúdo será separado em tópicos. 6.1. Abertura de outras páginas Para abertura de outras páginas, é necessária a inserção do atributoHREF=“nome_da_página.html” dentro da tag <a>. Por exemplo: vamos supor que vocêgostaria de abrir uma página que se chama “tutoriais.html”; bastaria digitar o comando<a href=“tutoriais.html”> e o nome que se deseja que apareça como link. Vamos suporque seja a frase “Tutoriais? Clique aqui!”. O código ficaria assim: <HTML> <HEAD> <TITLE>Primeiro exemplo de linkagem</TITLE> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <p> <a href=”tutoriais.html”>Tutoriais? Clique Aqui!</a> </BODY> </HTML> Fácil não? Ao usuário clicar no link apresentado no navegador, a página“tutoriais.html” será apresentada automaticamente, sem a necessidade de mais nadaalém de um simples clique do mouse. Agora imagine um megasite, com cem ou mais páginas, cada página com umas 5figuras, e tudo isso junto no mesmo diretório... bagunçado, não acha? Para se evitar esseproblema, pode-se dividir o site em diretórios, organizando assim o seu conteúdo,facilitando a correção de erros e a manutenção do site. E como se faz para linkararquivos em diretórios diferentes?Alexandre Zannella Gorian (azg@terra.com.br) 21
  21. 21. HTML Avançado A linkagem de páginas em diferentes diretórios se faz especificando o diretórioque ele se encontra no servidor. Essa especificação pode ser feita de duas maneiras: • Especificação do endereço completo. No campo “href” digita-se a URL completa da página do site, como por exemplo “http://www.site.com.br/tutorias/tutoriais.html”; • Especificação do diretório da página. Dessa forma, basta digitar no campo “href” o diretório onde se encontra a página, uma barra comum e o arquivo correspondente. Ex.: “tutoriais/tutoriais.html”. A forma utilizada pela maioria dos webdesigners para acesso à outros diretóriosé através da especificação do diretório, por ser mais prático e direto. Note que oendereçamento é feito com barras comuns (/) e não com barras invertidas (). Ex.:<HTML><HEAD> <TITLE>Exemplo de linkagem 1</TITLE></HEAD><BODY><h2> Guia de tutoriais online</h2><p> <a href=”tutoriais/tutoriais.html”>Tutoriais? Clique Aqui!</a><br><a href=”tutoriais/html/html.html”>Tutorial de HTML</a><br><a href=”tutoriais/asp/asp.html”>Tutorial de ASP</a></BODY></HTML> Caso o arquivo estiver em diretórios acima do atual, deve-se adicionar “../” atéchegar ao diretório desejado, e aí digitar o arquivo desejado. Ex.:<HTML><HEAD> <TITLE>Tutorial de HTML</TITLE></HEAD><BODY><h2> Tutorial de HTML</h2><p> <a href=”../tutoriais.html”>Tutoriais? Clique Aqui!</a><br><a href=”../asp/asp.html”>Tutorial de ASP</a><br><a href=”../../index.html”>P&aacute;gina principal</a></BODY></HTML> 6.2. Linkando arquivos A linkagem de arquivos se procede da mesma maneira que a linkagem depáginas, só que dessa vez o arquivo de destino não é interpretado pelo navegador. Muitocuidado sobre o tipo de arquivo a ser linkado, pois o navegador pode abrir (comoarquivos do tipo texto, outros arquivos HTML, etc.) e o resultado não será o desejado.Para evitar esse tipo de problema, coloque aviso na página do tipo “clique com o botãodireito do mouse e selecione ‘salvar como’” ou então compacte-os no mesmo arquivo.Alexandre Zannella Gorian (azg@terra.com.br) 22
  22. 22. HTML AvançadoA compactação pode ser útil não só para redução de arquivos grandes, mas também paraa junção de vários arquivos em um só. Os arquivos colocados para download podem estar no mesmo servidor ou emservidores diferentes, sendo a sintaxe semelhante à da linkagem de páginas HTML. Ex.: <HTML> <HEAD> <TITLE>Exemplo de linkagem de arquivos </TITLE> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <p> <a href=”html.zip”>Tutorial de HTML.</a> <br><a href=”http://www.outrosite.com.br/apostilas/html.pdf”>Tutorial de HTML de outro site.</a> <br><a href=”../../index.html”>P&aacute;gina principal</a> </BODY> </HTML> 6.3. Criação de âncoras Âncoras são pontos de apoio dentro de uma página HTML para servir dereferência sobre algum assunto dentro de alguma página. Supondo que numa página que é 4 vezes maior do que a tela, é que um assuntodesejado (por exemplo “Teste”) se encontra na sua metade. Ao invés de fazer com que ousuário saia procurando o assunto pela página, pode-se criar uma âncora para o acessodireto. Nesse caso, o código ficaria algo assim: <HTML> <HEAD> <TITLE>Exemplo de âncoras</TITLE> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <P>Aqui se localiza o texto normalmente, com seus par&aacute;grafos, itens, links, etc. <P><A href="#teste">link</a> que aponta para teste. <P>Aqui cont&eacute;m mais textos</P> <P><a name="teste">Teste</a> <p>Finalizando a p&aacute;gina. <br><A href="../../index.html">P&aacute;gina principal</a> </P> </BODY> </HTML> Caso quisesse fazer uma ligação da página inicial até essa âncora, ou de umoutro site até essa âncora, é só colocar o endereço do arquivo e depois a âncora. Ex.:Alexandre Zannella Gorian (azg@terra.com.br) 23
  23. 23. HTML Avançado <HTML> <HEAD> <TITLE>Segundo Exemplo de âncoras</TITLE> </HEAD> <BODY> <h2> Guia de Refer&ecirc;ncias on-Line</h2> <P>Veja esse site sobre <A href="www.meuservidor.com.br/tutoriais/html/html.html#teste">HTML </a>. </BODY> </HTML> 6.4. Outras ligações Para se fazer ligações em títulos, rodapés, enfim, em qualquer objeto presente napágina, basta colocá-lo entre as tags de abertura e fechamento do link. Essa tag aceitaoutras tags em seu interior, como negrito, itálico, títulos, parágrafos, formatação defontes, enfim, pode-se linkar praticamente tudo! Outra linkagem muito interessante é a de e-mail. Basta colocar no campo “href”o valor “mailto:fulano@procedor.com” e, quando o cliente clicar no endereço, seráaberta uma nova mensagem no programa de e-mail dele com o campo “para”preenchido com o e-mail especificado.Alexandre Zannella Gorian (azg@terra.com.br) 24
  24. 24. HTML Avançado 7. Figuras A inclusão de figuras nas páginas HTML trouxe uma revolução em seuconteúdo, permitindo a disseminação de conteúdos cada vez mais atrativos pela Web.Contudo, com a inserção de arquivos demasiadamente grandes de imagens, houve umcongestionamento maior no meio, além de uma demora maior no carregamento dapágina. Com a evolução da tecnologia de acesso e também no tratamento de imagens,esse problema foi muito diminuído, levando o tempo de carregamento de figuras de umapágina a se tornar algo suportável, embora somente quem tem uma conexão de altavelocidade pode desfrutar do carregamento quase instantâneo de figuras. Apesar de tudo isso, ainda é importante o cuidado na confecção de imagens,deve-se lembrar que, cada 1kb economizado em cada figura, pode influenciar no tempofinal de carregamento de um site. Por exemplo: supondo que possa-se economizar 2Kbem uma figura e 1Kb em mais 4 figuras, ao final de carregamento, esses 6Kb significam2 ou mais segundos. Outras dicas dizem respeito à imagens grandes ou de excelentequalidade, onde acaba gerando arquivos grandes. Caso tenha que colocar uma imagemgrande, ou de boa qualidade, coloque um preview antes, assim o usuário poderáescolher qual imagem poderá ser aberta. 7.1. Formatos de figuras 7.1.1. GIF Popularizado pela CompuServe, o Graphics Interchange Format é o formatomais usado pelos webdesigners, uma vez que é compacto e leve, e ainda permite aforma intercalada, onde a imagem aparece toda de uma vez e aos poucos vaimelhorando a qualidade, ao contrário dos outros formatos onde a imagem vaicarregando aos poucos e com a qualidade final. O único problema desse formato é ofato de salvar apenas em 256 cores, o que a torna deficiente em imagens que exigemaltos números de cores. 7.1.2. JPGE O Joint Point Photographic Engineering Group é o formato preferido paraarmazenamento de fotografias, uma vez que permite que se salve em mais cores do queo Gif e não é tão pesado quanto um BMP. Suporta até 16 bit colors (65.536 cores). 7.1.3. BMP O bitmap é o arquivo padrão do Windows, embora seja aberto também emoutras plataformas. Caracterizado pelo seu enorme tamanho, permite um número muitomaior de cores, embora, por causa do seu tamanho, seja muito raramente utilizado. Parase ter uma idéia de tamanho, uma imagem BMP como fundo de tela (no caso doWindows) ocupa geralmente 1,4Mb de tamanho (cerca de 7 min de download), sendoque em jpg, com boa qualidade gráfica ocuparia cerca de 250Kb (cerca de 1 minuto e 20segundos de download) e em gif pode chegar a 180Kb (algo em torno de 50 segundosde download), quando em baixa qualidade.Alexandre Zannella Gorian (azg@terra.com.br) 25
  25. 25. HTML Avançado 7.2. Obtenção de imagens As imagens podem ser obtidas de várias formas, seja através de outros sites,revistas, fotos, ou seja através de desenho próprio. Na construção de sites pessoais, acolocação de figuras copiadas de outros locais pode ser interessante, o que não érecomendado em sites profissionais. A criação do layout (apresentação) do site é recomendada que se faça de formapessoal, sem uma cópia exagerada de outro site. Uma navegação pelo universo daInternet pode ser útil para auxiliar na idealização do seu site, mas nunca exagere na“influência”. Lembre-se também que uma coisa que ficou legal num site nãonecessariamente ficará bom no seu. O domínio sobre uma ferramenta de editoração gráfica é importante, assim serápossível trabalhar imagens para que fiquem mais leves e de melhor atendimento àsnecessidades. É claro que não é necessário ser um designer gráfico, mas o básico éimportante conhecer. Dentre os principais programas de editoração gráfica podemos citar o AdobePhotoshop (o mais utilizado), o Corel Photo Draw! e o Paint Shop Pro. A diferençaentre cada um somente será notada somente quando comparado a fundo um com ooutro. Escolha o seu e mãos à obra! 7.3. Aplicação A inserção da imagem se dá de forma bastante simples, bastando-se adicionar atag <img> e seu atributo “scr=imagem.jpg” (ou scr=imagem.gif), onde “imagem.jpg”(ou “imagem.gif”) deverá ser substituído pelo nome da imagem a ser apresentada nobrowser, escrito de forma idêntica ao nome do arquivo e a extensão certa. Assim comono links, imagens de outros diretórios ou sites podem ser especificados colocando aURL ou caminho. Ex.: O resultado apresentado no browser seria como mostrado abaixo: <html> <head> <title>Exemplo de Imagens 1</title> </head> <body> <img src="IMG/windows9598.gif"> </body> </html>Alexandre Zannella Gorian (azg@terra.com.br) 26
  26. 26. HTML Avançado Figura 7.1 – apresentação da figura no browser 7.4. Outros atributos Por ter vários atributos importantes, vamos separar por tópicos para facilitar oaprendizado. 7.4.1. Align Mais uma vez, ele determina o alinhamento, só que, dessa vez, não em relaçãoao parágrafo, e sim em relação à disposição do texto ao redor da imagem. Os principaisvalores são: • Botton: alinha o texto abaixo da figura; • Middle: dispõe a primeira linha do texto a partir do centro da figura e o restante abaixo dela; • Top: dispõe a primeira linha do texto a partir do topo da figura e o restante abaixo dela; • Left: coloca a figura no lado esquerdo do texto; • Rigth: coloca a figura no lado direito do texto; Ex.:Alexandre Zannella Gorian (azg@terra.com.br) 27
  27. 27. HTML Avançado <html> <head> <title>Exemplo de Imagens 1</title> </head> <body> <p align="center"> <IMG src="img/windows9598.gif"> Imagem com alinhamento padr&atilde;o (botton),<br>repare no alinhamento do texto. <p> <IMG align=top src="img/anim1.jpg"> alinhamento superior agora (top) veja s&oacute; como ficou ru&iacute;m esse texto assim desse jeito...&nbsp; texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <p> <IMG align=right src="img/anim1.jpg"> agora uma imagem com alinhamento direito (right), veja como &eacute; mais apresent&aacute;vel assim...&nbsp; texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> </body> </html> A apresentação no browser:Alexandre Zannella Gorian (azg@terra.com.br) 28
  28. 28. HTML Avançado Figura 7.2 – Apresentação no browser dos alinhamentos de figuras 7.4.2. Alt Esse atributo é muito interessante (e útil). Sua funcionalidade é colocar um textono lugar onde ela será apresentada até ser completamente aberta. Uma vez carregada,quando o mouse for posicionado em cima da figura, uma legenda aparecerá com o queestá escrito nesse atributo. Outro ponto importantíssimo é o fato dele ajudar os deficiente visuais anavegarem, uma vez que o que está escrito é lido pelo programa próprio. Caso o menuseja através de figuras, o deficiente poderá navegar sem problemas (caso contrário oprograma menciona somente “gráfico”, e ele fica sem saber o que representa). A utilização é bastante simples, bastando-se digitar “alt=” e o que deseja queapareça. (ex.: alt=“Figura dos Animaniacs”). 7.4.3. Tamanho Outras coisas importantes a serem mencionadas no código, são as dimensões daimagem, através dos atributos “width” (largura) e “height” (altura). A vantagem dautilização do código é o fato de que o navegador lê antes o texto e depois as figuras,assim, o desenho do layout não será modificado ao serem carregadas as figuras. Háquem diga que o carregamento da figura se dá de forma mais rápida, ou pelo menosaparenta ser.Alexandre Zannella Gorian (azg@terra.com.br) 29
  29. 29. HTML Avançado 7.4.4. Border Pode-se inserir bordas nas figuras, afim de modificá-las, deixa-las mais bonitas,ou outras coisas. Quando não se especifica o valor, a imagem fica sem bordas, excetoquando é um link. 7.5. Imagens mapeadas O que acontece quando se quer colocar links diferentes dentro de uma mesmaimagem? Divide-se a imagem em pedaços? Não necessariamente. O mapeamento de imagem serve para criação de links em várias posiçõesdiferentes dentro de uma mesma imagem. Uma vez que seria muito desgastante aconfecção manual de um mapa de uma figura, a utilização de um editor de mapas é defundamental importância.Alexandre Zannella Gorian (azg@terra.com.br) 30

×