UNIVERSIDADE FEDERAL DE PELOTAS. Índice

Transcrição

1 Índice INTRODUÇÃO: 2 DESENVOLVENDO UMA PÁGINA WEB 7 TÍTULOS 9 CABEÇALHOS: 10 PARÁGRAFOS 11 DEFININDO FONTES 12 ESTILOS DE TEXTO 13 ACENTOS E CARACTERES ESPECIAIS 14 QUEBRAS DE LINHA 15 INFORMAÇÕES SOBRE A PÁGINA 16 INSERINDO COMENTÁRIOS EM SUA PÁGINA 17 LINHAS HORIZONTAIS 18 CONTROLE DE CORES E GRÁFICOS DE FUNDO 19 ALINHANDO ELEMENTOS DE UMA PÁGINA 22 LISTAS 24 TEXTO ANIMADO 28 ENDEREÇOS 30 INTERLIGANDO DOCUMENTOS LINKS 31 IMAGENS GRÁFICAS 36 INSERINDO SOM 40 TABELAS 42 FRAMES 56 FORMULÁRIOS 60 UPLOAD DE ARQUIVOS 64 DICAS 67 1

2 INTRODUÇÃO: Um dos maiores desafios de pesquisa da ciência de computação, dentre outros nestes últimos anos, é a construção de hiperdocumentos e suas respectivas interfaces. A capacidade oferecida de acesso não-linear a informação, os hiperdocumentos conduziram indiretamente à composição de ligações de as quais refletem, melhor que o texto seqüencial o faz, o modo humano de organizar o conhecimento[maenza, 1994]. Oferecendo a riqueza da multimídia, os hiperdocumentos despertam para uma interpretação mais ampla da motivação e da criatividade. Debruçamo-nos sobre a questão da autoria e a leitura de hiperdocumentos, especialmente no tocante á interface Homen- Máquina. A leitura em um hiperdocumento, é entendida como um processo descontínuo, e não linear onde, através das ligações, o leitor navega de uma informação e outra, não necessariamente em uma ordem seqüencial. Assim como o pensamento é, por natureza, associativo, o mecanismo de leitura em um hiperdocumento procura representar este relacionamento associativo por meio de nós de ligações. O processo de escrita em ambientes de hiperdocumentos, é denominado autoria. Não envolve somente a composição do texto, mas também o esquema da tela e o projeto da interface e o que, talvez seja mais importante: a criação e o gerenciamento de ligações entre os nós. O conceito de interface aplicado especialmente a informática, designa um dispositivo que garante a comunicação entre dois sistemas informáticos distintos ou um sistema informático e uma rede de comunicação. Utilizando ferramentas adequadas, para obter-se uma interface com um conjunto de elementos que devem formar um conjunto com unidade, harmonia e coerência. Esse conjunto deve ter unidade para não apresentar elementos soltos e desconexos, que podem confundir o usuário, levando-o a perder-se no produto, confundindo ou ignorando informações. WEB Sua idéia inicial foi concebida em 1989, nos laboratórios de CERN (European Laboratory of Particle physics), na Suíça. Tim Berners-Lee, seu criador, conheceu a linguagem com o propósito de interligar os computadores do laboratório e instituições de pesquisa coligadas a ele. O objetivo era Ter uma linguagem que exibia documentos 2

3 científicos de forma simples e fácil de acessar. A Web tornou-se a moda no meio científico-universitário e cresceu rapidamente, essa moda foi rapidamente assimilada pelas universidades americanas. O crescimento estupendo da Web veio com a criação do primeiro Browser (navegador) gráfico, tipo Windows, no final de 1993, que foi desenvolvido por Marc Anderseen. Em 1994 foi fundada a Netscape Corporation que com seu browser permitiu a popularização definitiva da Web. Desde então o crescimento da Web tem sido exponencial, numa velocidade fantástica. O browser da Netscape tornou-se quase um padrão da Web, até que a partir do final de 1995, a Microsoft resolveu entrar no mercado, e colocou o produto Internet Explorer a disposição cerca de 15% da base mundial instalada de navegadores. A Web é uma base de dados gigantesca que funciona através de hipertexto, que permite acesso a arquivos da Internet de forma gráfica. A chave do sucesso da World Wide Web é o hipertexto. Os textos e imagens são interligados, através de palavraschave tornando a navegação simples e agradável HIPERTEXTO O termo hipertexto surgiu na década de Significa um texto não-linear, com mais de uma dimensão enquanto que um texto é uma coleção de informações organizada de forma linear, possuindo apenas uma dimensão, a qual deve ser apresentada e recuperada de forma seqüencial. No hipertexto, a informação está organizada em uma rede, cujos nós contém informação e estão relacionados por elos. Cada elo está, em geral associado diretamente a uma âncora, que pode ser um botão ou ícone, representando a origem de um elo, e ao ativá-la ocorre um salto para um outro nó. Quanto a apresentação as âncoras aparecem em geral realçadas, ou em cor diferente, na informação que está sendo apresentada na tela. Através de ligações(links), o usuário pode pesquisar apenas os tópicos que lhe interessam e ignorar os que não lhe convém. O hipertexto é muito utilizado hoje em dia na multimídia em geral e em páginas na Web. 3

4 MULTIMÍDIA Refere-se a diversos tipos de informação que podem ser editadas e armazenadas em tipos específicos de dispositivos. É as apresentações organizadas de som, imagens gráficas estáticas, animações, textos e vídeos em movimento. Esse tipo de informação tem por finalidade esclarecer assuntos, indicar tendências, informar, formar, demonstrar ou simplesmente divertir. HIPERMÍDIA É definida pela associação do hipertexto e da multimídia, a qual manipula um conjunto de informações pertencendo a diferentes tipos de mídia(textos, imagens, sons, animações e gráficos), podendo estas informações serem recuperadas de forma nãolinear através de diversos caminhos de acesso disponíveis. Em outras palavras, a hipermídia é simplesmente uma extensão do hipertexto que incorpora outros tipos de dados além do texto. HTML - Hiper Text Markup Language É a linguagem de marcação de hipertexto, ou seja, e a linguagem na qual são escritas as páginas da Web, interpretada pelo navegador. As informações estão organizadas na forma de páginas ligadas entre si. Quando se acessa um site, normalmente entra pela porta da frente, onde existe uma mensagem de boas vindas e uma espécie de índice para as demais páginas. Essa entrada se chama página principal, ou home page. Na Web, vamos encontrar também outros tipos de documentos além dessas páginas interligadas. Acessa-se computadores que mantém programas para serem copiados gratuitamente, conhecidos como sendo assim, qualquer usuário pode, somente com o seu mouse, Ter acesso a uma enorme quantidade de informação na forma de textos, imagens, sons, gráficos, vídeos, etc..., navegando através de palavras chaves e ícones. A página é transferida de um computador remoto para o usuário, onde o browser faz o trabalho de interpretar os códigos contidos naquele documento e mostra a página que o usuário vê. A Web está estruturada em dois princípios básicos: HTTP(Hiper Text Tranfer Protocol) e HTML (Hiper Text Markup Language). 4

5 HTTP é o protocolo de transferência de hipertexto, ou seja, é o protocolo que permite a navegação na Web, com o simples clicar do mouse sobre o texto(ou imagem) que esteja associado a outro link. Estas ligações entre as páginas, conhecidas como hiperlinks (ligações de hipertexto), podem ser de informações contidas no próprio site, bem como de computadores e empresas em qualquer lugar do mundo. Na Web é possível que uma máquina faça referência a praticamente qualquer documento disponível na Internet, e também outros tipos de documentos além dessas páginas interligadas, podem acessar computadores que mantém programas para serem copiados gratuitamente, conhecidos como servidores de FTP, grupos de discussão e páginas comuns de texto. Os endereços na web sempre iniciam com são conhecidos como URL(Uniform Resource Locator) é o endereço particular e único de cada página da Web. Uma URL padrão possui até três partes: o domínio( possivelmente um diretório ou diretórios e possivelmente um arquivo(web.htm). Um browser é um programa navegador de Web. Os mais usados são o Netscape(cerca de 75% do mercado mundial) da Netscape Corporation e o Internet Explorer(cerca de 15% do mercado mundial) da Microsoft, com diversos recursos de multimídia acoplados a cada um. Ambos os navegadores, possuem tecnicamente para o usuário leigo pouca diferença. É uma questão de escolha. Existem outros navegadores alternativos menos utilizados como o Opera que é pequeno, rápido e leve, possui cliente de e gerenciador de download próprio. Também o MSN, novo programa da Microsoft para tornar a Web ainda mais interessante. Funciona como browser, cliente de , programa de mensagens instantâneas, player de som, entre outros recursos. Possui uma interface muito amigável, com recursos de procura de música e vídeo, suporta e gerencia múltiplos usuários, e é atualizado automaticamente via web. Neoplanet é outro Browser alternativo, customizável e extremamente 5

6 simples de usar. Você poderá trocar skins do Neoplanet e usará o mecanismo do seu Internet Explorer 3.0, 4.0, 5.0 ou 5.5. Esta versão já vem com um programa para download e muito mais. O AWE - Adonay Web Explorer é atualmente o web browser com maior número de recursos e funções. Multinavegação, bloqueio de janelas PopUps, tradutor web inglês / português, zoom, notícias em tempo real, muda cor / imagem de fundo e fontes das páginas, mostra todos os links relacionados, navega em tela cheia, suporta Java, Flash e conexões seguras. É importante que os usuários deve sempre usar a versão mais recente de seu navegador para estar sempre atualizado com os novos plugins disponíveis para melhor navegabilidade pela Web. Estes navegadores relacionados são totalmente grátis, e podem ser adquiridos em suas empresas ou em inúmeros locais disponíveis para download na Internet, como o site SuperDownloads no Brasil e o Download.com internacional. O melhor lugar é o seu próprio provedor de acesso. 6

7 DESENVOLVENDO UMA PÁGINA WEB Você vai precisar:!"conhecer a linguagem HTML para escrever o código fonte de sua página!"um editor de textos para gerar o seu código fonte (bloco de notas, word, Wordpad)!"Um navegador de internet para visualizar as suas páginas (Netscape, Internet Explorer, Opera) TAGs Os comandos HTML são chamados de TAGs, compreendem de marcas padrões que são utilizadas para fazer indicações a um browsers. Assim como em outras linguagens, os comandos têm uma sintaxe própria, e seguem algumas regras: #"As TAGs aparecem sempre entre os sinais de menor que (<) e maior que (>); #"Geralmente são utilizadas aos pares, sendo que a TAG de finalização de um comando qualquer é finalizada com a precedência de uma barra (/). Em geral: <nome da TAG> t e x t o </nome da TAG> onde: <nome da TAG>: indica o início da TAG </nome da TAG>: indica o fim da TAG Para criar uma página Web, você pode utilizar qualquer editor de texto simples, até mesmo o bloco de notas do Windows. Porém é mais prático utilizar um editor de HTML, que escrevem parte dos comandos para você. Guardando os seus documentos em HTML 1. Clique no menu ARQUIVO e escolha a opção SALVAR COMO; 2. Selecione o local,ou pasta onde você irá salvar seus arquivos; 3. Na caixa de texto NOME DE ARQUIVO, digite o nome_do_arquivo.htm. Não esqueça da extensão: *.htm ou *.html; 4. Na caixa de texto SALVAR COMO TIPO, selecione todos os arquivos (*.*); 5. Clique em salvar. MODELO BÁSICO DE PÁGINA WEB Uma página Web criada em HTML, possui três partes básicas: estrutura principal, um cabeçalho e um corpo de página. Possui uma estrutura dividida em 4 TAGs básicas: <HTML>... <HTML> <HEAD>... <HEAD> <TITLE>... <TITLE> <BODY>... <BODY> 7

8 Onde: <HTML>... <HTML> são usados para delimitar os comandos HTML, indicam o início e o fim de um documento. O browser reconhece a TAG <HTML> e identifica que o documento que virá à seguir deve ser interpretado como HTML. <HEAD>... </HEAD> Delimitam a seção do cabeçalho do documento onde serão definidos poucos comandos de linguagem, o mais importante é o título que é exibido na barra de títulos do browser. <TITLE>... </TITLE> Definem o título da página que pé exibido na barra de títulos do browser. Estas TAGs devem estar sempre dentro das TAGs <HEAD></HEAD>. <BODY>... </BODY> Dentro desta TAG estão os elementos da página web. ÉW onde estão localizados as os textos, imagens, ligações com outras páginas, etc... <HTML> <HEAD> <TITLE> CURSO DE HTML PÁGINA BÁSICA </TITLE> </HEAD> <BODY> DESENVOLVENDO PÁGINAS DE INTERNET </BODY> </HTML> 8

9 TÍTULOS Todo documento em HTML deve possuir um título. De um modo geral aparece em um lugar separado da página, na maioria das vezes no alto da tela dos navegadores. Utilizado para identificar o documento. Interessante que possa sugerir claramente o conteúdo do documento. <HTML> <HEAD> <TITLE> Curso de HTML </TITLE> </HEAD> <BODY> <H2> Visualize a parte superior da janela do navegador </H2> </BODY> </HTML> Como fica no navegador: 9

10 CABEÇALHOS: São linhas do documento que são exibidas no browser com letras diferentes do restante do texto chamando a atenção de uma nova seção ou tópico. Sempre que se definir um novo cabeçalho, uma nova linha é inserida em branco após a sua linha. Ao definir o tamanho de um cabeçalho, não se está definindo o tamanho da letra, apenas é indicado ao navegador de cada usuário que deve ser visualicado com maior ou menor destaque que o resto do texto. A TAG <H> Esta possui seis tamanhos os modelos diferentes. O tamanho ou corpo dos caracteres vai do nível 6 (menor nível) ao 1 (maior nível). Sintaxe de comando: <Hn> TEXTO DO CABEÇALHO </Hn> #"n varia de 1 a 6 #"H1 é o maior corpo #"H6 é o menor corpo cabeçalhos.htm <HTML> <HEAD> <TITLE> Cabeçalhos </TITLE> </HEAD> <BODY> <H1>Texto formatado com H1</H1> <H2>Texto formatado com H2</H2> <H3>Texto formatado com H3</H3> <H4>Texto formatado com H4</H4> <H5>Texto formatado com H5</H5> <H6>Texto formatado com H6</H6> </BODY> </HTML> 10

11 PARÁGRAFOS A TAG <P> A TAG responsável pela quebra de parágrafos é a <P> que finaliza o parágrafo e insere automaticamente a um alinha em branco entre parágrafos. Também responsável pelo alinhamento de parágrafos. Sintaxe de comando: <P ALIGN= posição > Texto do parágrafo. Posição pode ser: #"Left: alinhamento a esquerda; #"Center: centralizado #"Right: alinhamento a direita Nome do arquivo: parágrafos.htm <HTML> <HEAD> <TITLE> Alinhamento de Parágrafos </TITLE> </HEAD> <BODY> <P>Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo). <P ALIGN= center > Este parágrafo tem o alinhamento centralizado. <P ALIGN= right > Este parágrafo tem o alinhamento a direita. </BODY> </HTML> 11

12 DEFININDO FONTES A TAG <FONT> Permite que você insira em sua página um texto com fontes de tamanhos, cores e tipos diferentes. Comando: <FONT SIZE= n FACE= nome COLOR= cor > texto </FONT> Onde: $" SIZE= n : n varia de 1 a 7 e 3 é o valor padrão da maioria dos navegadores; $" FACE= nome : nome da fonte a ser utilizada; $" COLOR= cor : cor da fonte definida em hexadecimal, ou através de um nome prédefinido de cores. Formatando_fontes.htm Observações: Caso a fonte face indicada para sua página não esteja disponível para o usuário que visitar a sua página, a fonte utilizada então será a padrão do navegador utilizado pelo visitante; Pode-se definir mais de uma fonte face, caso a primeira não esteja instalada no sistema do usuário, o browser reconhece a próxima FACE definida; Outros exemplos: #"fontes_especiais.htm; #"fontes_especiais2.htm; 12

13 ESTILOS DE TEXTO Como nos editores de texto, alem dos tamanhos das fontes, você pode modificar o estilo de texto. Pode-se atribuir o negrito, itálico, sublinhado entre outros, abaixo relacionados: Tabela de estilos: COMANDO APLICANDO O ESTILO FUNÇÃO Negrito <B> Texto </B> Atribui o estilo negrito Itálico <I> Texto </I> Atribui o estilo itálico Sublinhado <U> Texto </U> Atribui o estilo sublinhado Strong <STRONG> Texto </STRONG> Semelhante ao estilo negrito Ênfase <EM> Texto </EM> Semelhante ao estilo itálico Typewriter <TT> Texto </TT> Espaço regular ao texto Big <BIG> Texto </BIG> Aumenta a fonte e atribui negrito Small <SMALL> Texto </SMALL> Reduz e altera a fonte Sobrescrito <SUP> Texto </SUP> Eleva o texto e eleva o seu corpo Subscrito <SUB> Texto </SUB> Rebaixa o texto e diminui seu corpo Pulsante <BLINK> Texto </BLINK> Faz o texto ficar pulsante 13

14 ACENTOS E CARACTERES ESPECIAIS Os arquivos HTML, não podem conter nenhum tipo de formatação ou caracteres especiais(símbolos ou letras acentuadas). Para criar uma página com caracteres especiais, deve-se utilizar alguns códigos especiais que o browser interpreta e substitui por um caractere específico. Um bom exemplo seria representar uma TAG sem que o browser interpretasse como uma TAG. escrevendo a TAG= <BODY>. Para representá-la os sinais<>= <BODY> Encontra-se em anexo uma tabela com uma lista de códigos e caracteres especiais mais utilizados. Os navegadores mais atualizados reconhecem caracteres, alguns. <HTML> <HEAD> <TITLE>Alguns acentos e caracteres especiais </TITLE> </HEAD> <BODY> à<br>ã <br>â <br>ä <br>é <br>è <br>ê <br>í <br>ì <br>õ </BODY> </HTML> Verificar a página acentos_e_caracteres_especiais.htm, que contem tabela de exemplos 14

15 QUEBRAS DE LINHA A TAG <BR> Faz uma quebra de linha sem acrescentar espaços extras entre linhas. Finaliza a linha de texto e insere automaticamente uma outra linha em branco. Não necessita ser finalizada com </BR> <HTML> <HEAD> <TITLE> Utilizando a quebra de linhas com a TAG <BR> </TITLE> </HEAD> <BODY> Este texto está utilizando a TAG BR no final de cada linha<br><br> Você pode utilizar<br> a TAG BR<BR> toda vez que<br> você quiser passar o texto<br> para a próxima linha.<br><br>o resultado é simples. </BODY> </HTML> 15

16 INFORMAÇÕES SOBRE A PÁGINA A TAG <META> Proporcionam informações sobre a página, para o utilizador e para os motores de pesquisa. Estes tags só necessitam e devem estar presentes na primeira página do site (normalmente no index.html), porque só essa é pesquisada pelos search engines. Existem dois tipos de motores de pesquisa ou search engines: os indexes e os spiders. Os primeiros são atualizados manualmente e os spiders são automáticos. Deste modo, no Yahoo!, que é um index, para que um site seja listado, tem que se preencher um formulário, enviá-lo, e esperar por uma resposta de um responsável do yahoo a confirmar que o site foi adicionado à base de dados. Em contrapartida, no AltaVista, que se trata de um spider, para adicionar um site, só se tem de introduzir o url na secção "add url" e esperar por uma resposta automática e quase imediata do robot, a confirmar que o endereço existe e que os <META> tags foram localizados. Os <META> tags encontram-se geralmente dentro do <HEAD> </HEAD> e depois do <TITLE> </TITLE>. Os atributos de <META>: CONTENT: 1. Corresponde a informação disponível na TAG <META>. NAME: 1. O atributo NAME indica o tipo de informação que o <META> tag apresenta. Pode ter vários valores, tais como: $" Keywords: indica as palavras chaves da página. <META NAME="keywords" CONTENT="HTML, Tags, Atributos"> $" Description: indica uma breve descrição da página. <META NAME="description" CONTENT="Uma página sobre HTML"> $" Author: indica o autor da página. <META NAME="author" CONTENT="Gabriel Augusto"> Visualizando a página: Visualizando o código fonte da página do UOL, observe as informações sobre a página neste ponto. 16

17 INSERINDO COMENTÁRIOS EM SUA PÁGINA São utilizados em sua página WEB para descrever procedimentos utilizados na criação de sua página. O texto de um comentário não é exibido pelo navegador. Alguns navegadores de Internet não reconhecem o uso de TAGs dentro de comentários, sendo assim quando utilizadas junto ao seu comentário poderá exibir na página o seu comentário. São muito úteis na hora de manutenção de uma página. Servem como lembretes ou dicas para o programador que fará a atualização da página WEB. Sintaxe de Comando: <! Texto do parágrafo --> <HTML> <HEAD> <TITLE> Página com comentários </TITLE> </HEAD> <BODY> Esta página contém diversos comentários <!--Um comentário não é exibido na tela pelo navegador--> <!--Um comentário é como um lembrete--> <!--Pode ser colocado em qualquer ponto dentro do HTML--> </BODY> </HTML> Observe que em determinados pontos do código fonte, são inseridos comentários para própria orientação do programador da página 17

18 LINHAS HORIZONTAIS A TAG <HR> Insere linhas horizontais no navegador. Este recurso pode ser utilizado para dividir a sua página chamando a atenção para algum tópico específico. Sintaxe de comando: <HR WIDHT= N% ALIGN= Posição SIZE= n COLOR = #cor NOSHADE> Sobre cada atributo: 1. WIDHT= n% : define a largura da linha. Pode ser definida em pixels ou em porcentagem do tamanho horizontal da tela; 2. ALIGN= posição : posição pode ser: $" left: alinhamento a esquerda; $" center: centralizado; $" right: alinhamento a direita 3. SIZE= n :define a espessura da barra, em pixels; 4. COLOR=#cor: define uma cor a barra utilizada 5. NOSHADE: define que a barra não deve receber o efeito 3D. <BODY bgcolor="#d6e4ed"> <div align="center>linhas Horizontais</div> <br> Linhas com alturas - SIZE- diferentes: Tamanho 10: </font> <HR SIZE="10" WIDTH="85%"> Tamanho 20: <HR SIZE="20" WIDTH="85%"> <br> Linhas com larguras - WIDHT - diferentes: Largura 50% da página: <HR SIZE="05" WIDTH="50%"> Largura 100% da página: <HR SIZE="05" WIDTH="100%"> <br> Linhas com alinhamentos - ALIGN - diferentes: Alinhamento a direita da página: <HR SIZE="05" ALIGN="RIGHT" WIDTH="80%"> </BODY> 18

19 CONTROLE DE CORES E GRÁFICOS DE FUNDO A maioria dos browsers permite a utilização de cores, apenas 256, mas já é o suficiente para você criar uma página com fundo e texto personalizados. As cores são compostas por códigos RGB(red, green, blue). cada código define a intensidade do vermelho, do verde e do azul, formando uma cor. Cada código varia de 0 a 255, onde 000 equivale ao preto e equivale ao branco. Devem ser informados no formato hexadecimal. não é necessário decorar os códigos de uma cor, para isto é só verificar a tabela de coresxcódigos em anexo. Para definir cores para sua página você deve utilizar a TAG <BODY> que possui atributos vinculados a ela que personalizam cada página de Internet. Pode-se Atribuir RGBs para cor de fundo da página, texto e links CORES E ELEMENTOS GRÁFICOS DE FUNDO #"Cor de fundo - BGCOLOR: É a cor do fundo da página. Este é um atributo que deve ser inserido dentro da TAG BODY; Comando: <BODY BGCOLOR= #RRGGBB > <body bgcolor="#ffffcc" text="#000033"> <H4 align="center">cor DE FUNDO<br> BGCOLOR="#cor"</H4> Com este atributo você controla a cor de fundo das páginas.<br><br> Comando:<br> <BODY BGCOLOR="#FFFFCC" TEXT="#000033"> </body> </html> #"Imagem de fundo - BACKGROUND: Aplica uma imagem como plano de fundo e que ocupará toda a área do fundo da tela do navegador, é aplicada em seqüência, uma ao lado da outra. Deve ser inseridos a marcação <BODY> e especificar a URL da uma imagem que será utilizada na página. Comando: <BODY BACKGROUND= URL > Corpo da Página </BODY> 19

20 <body background= "../imagens/fundo1.jpg"> <h3 align="center">imagem DE DE FUNDO<br> BACKGROUND="endereço& quot;</h3> Com este atributo você insere imagens de fundo nas suas páginas. <br><br>comando:<br> <BODY BACKGROUND="../imagens/fundo1.jpg"> </body> Nota: É importante ter cuidado quando aplicar elementos de fundo para que não seja prejudicada a leitura do texto. Sempre vale a pena visitar outras páginas que utilizam este recurso para recolher boas idéias. Alguns usuários de internet navegam sem a utilização de imagens para viabilizar uma melhor velocidade de acesso a WEB. em vista disso é interessante atribuir junto ao <BODY> uma cor de fundo (BGCOLOR). CORES DE LETRA E LINKS #"Texto - TEXT: Utilizado para controlar a cor do texto normal em uma página TEXT= #RRGGBB = é a cor do texto, o padrão é preto; Sintaxe de Comando: <BODY TEXT= #RRGGBB > Corpo da Página </BODY> 20

21 <body bgcolor="#ffffff" text="#333333"> <div align="center"> <h4>cores DE LETRAS DE TEXTO NORMAL<br> TEXT="#cor"</h4></div> Com este atributo, você controla a cor do texto normal em uma página.<br> Neste exemplo, estamos utilizando a cor indicada conforme o exemplo a seguir.<br><br>comando:<br> <BODY BGCOLOR="#FFFFFF" TEXT="#333333"> </body> #"Links LINK, VLINK, ALINK, :!"LINK= #RRGGBB = é a cor dos links, o padrão é azul;!"vlink= #RRGGBB = é a cor dos links visitados, o padrão é vermelho-púrpura;!"alink= #RRGGBB = é a cor do link ativo, onde o usuário pressionou o botão do mouse, mas ainda não soltou, o padrão é vermelho. Comando: <BODY LINK= #RRGGBB VLINK= #RRGGBB ALINK= #RRGGBB > <BODY BGCOLOR="#FFFFE0" TEXT="#FF6347" LINK="#ADFF2F" VLINK="#7FFFD4" ALINK="#0000CD"> <div align="center"> <h1>exemplo DE CORES<h1> <BR> <h3>o fundo da página está com uma cor especial: Lightyellow - RGB:FFFFE0</h3><BR> <h3>a cor do texto é: Tomato - RGB:FF6347</h3> <BR> LINK s: Greenyellow - RGB:ADFF2F<BR> VLINK s: Aquamarine - RGB:7FFFD4<BR> ALINK s: Mediumblue - RGB:0000CD<BR> </div> </BODY> 21

22 ALINHANDO ELEMENTOS DE UMA PÁGINA A TAG <DIV> Permite que você alinhe horizontalmente qualquer elemento em sua página. Esta difere da TAG <CENTER> por permitir alinhamento centralizado. O Alinhamento pode ser left, center ou right. Comando: <DIV ALIGN= posição >Elementos a serem alinhados</div> Onde: posição pode ser: #"left: alinhamento a esquerda; #"center: centralizado; #"right: alinhamento a direita 22 O alinhamento padrão é a esquerda, por defaut. <HTML> <HEAD> <TITLE> Alinhando Elementos com a TAG DIV </TITLE> </HEAD> <BODY> <DIV ALIGN="CENTER">Usando a TAG DIV:</DIV> <BR> <DIV ALIGN= RIGHT > <P>Usando a TAG DIV você pode alinhar o seu texto sem problemas. <P>Pode utilizar o alinhamento a direita, que alinha o seu texto na margem direita da tela. Como um texto criado em um editor de textos pra ser impressos em uma página. <P>Com a TAG DIV você pode aproveitar o mesmo alinhamento para vários parágrafos. </DIV> </BODY> </HTML> A TAG <CENTER> Permite centralizar horizontalmente qualquer elemento em sua página. O efeito é exatamente o mesmo da TAG <DIV ALIGN= CENTER >, porém a TAG CENTER não é reconhecida em todos os navegadores. Comando: <CENTER>Elementos a serem centralizados</center>

23 <HTML> <HEAD> <TITLE>Centralizando com a TAG CENTER </TITLE> </HEAD> <BODY> <CENTER> TAG CENTER </CENTER> <br> <p align="justify">centralizar os elementos de sua página em relação ao navegador Deve ser iniciada <center>e finalizada </center>, para não centralizar todos os elementos da página. Você pode utilizar.</p> <b>em IMAGENS:</b> <div align="center"> <b><center> </b><br> <img src="../imagens/dexter_laboratory.jpg" width="185" height="154"> <br> </CENTER></div><BR> <b>em TEXTOS:</b><br> <b><center> </b><br> <CENTER>Permite centralizar horizontalmente qualquer elemento em sua página. O efeito é exatamente o mesmo da TAG <DIV ALIGN="center"> ELEMENTO A SER CENTRALIZADO </DIV>, porém a TAG CENTER não é reconhecida em todos os navegadores.</center> <b></center></b><br> </BODY> </HTML> 23

24 LISTAS Uma boa forma de organizar as páginas WEB. Podem servir como resumos ou índices de todo o site, contendo links para as outras páginas criadas por você ou outras pessoas. TIPOS DE LISTAS: #"Listas não numeradas; #"Listas numeradas; #"Listas de definições; #"Listas intercaladas. #"Listas Não Numeradas: A TAG <UL>: Inserem marcadores na frente de cada item. Comando: <UL TYPE= formato > <LI> Tópico 1 <LI> Tópico 2 <LI> Tópico 3 </UL> Onde: 1. <UL>: início da lista pontuada; 2. TYPE= formato : o formato do marcador pode ser: $" disc: o marcador é um ponto (padrão utilizado pelos navegadores, não precisa indicar) $" square: o marcador é um quadrado $" circle: o marcador é um círculo 3. <LI>: tópicos da lista, não e necessário encerrar com a TAG </LI>; 4. </UL>: fim da lista pontuada. 24

25 listas_nao_numeradas.htm <HTML> <HEAD> <TITLE> Listas Não Numeradas </TITLE> </HEAD> <BODY> <H3>Listas Não Numeradas</H3> <UL TYPE="disc"> <LI> TYPE="disc" <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </UL> <UL TYPE="square"> <LI> TYPE="square" <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </UL> <UL TYPE="circle"> <LI> TYPE="circle" <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </UL> </BODY> </HTML> #"Listas Numeradas: A TAG <OL>: Permite inserir em sua página uma lista numérica ou alfabética, com valor pré-definido ou não Sintaxe de comando: <OL TYPE= formato START= n ><LI>Tópico 1<LI>Tópico 2<LI>Tópico n</ol> Onde: 1. <OL>: início da lista numerada; 2. TYPE= formato : o formato da numeração pode ser: $"1: lista numérica(não é necessário ser definido); $"A: lista alfabética com letras maiúsculas; $"a: lista alfabética com letras minúsculas; $"I: lista numérica com números romanos maiúsculos; $"i: lista numérica com números romanos minúsculos. 3. START= n : o valor inicial da lista numerada; 4. <LI>: tópicos da lista; 5. </OL>: fim da lista numerada. 25

26 listas_numeradas.htm <LI> Tópico dois; <LI> Tópico três. </OL> </OL> </BODY> </HTML> <HTML> <HEAD> <TITLE> Listas Numeradas </TITLE> </HEAD> <BODY> <H3 align="center">listas Ordenadas - Numeradas</H3> <H4>Lista Numerada Padrão:</H4> <OL> <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </OL> <H5>Lista Numerada Padrão com START="10":</H5> <OL START="10"> <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </OL> <H5>Lista Alfabética com Letras Maiúsculas:</H5> <OL TYPE="A"> <LI> Tópico um; #"Listas de Definições: A TAG <DL>: São diferentes das outras listas, pois cada item de cada lista possui dois componentes: um tópico e a descrição do tópico. Sintaxe de comando: <DL><DT> Tópico 1<DD> Descrição do tópico 1 <DT> Tópico n <DD> Descrição do Tópico n </DL> Onde: 1. <DL>: início da lista descritiva; 2. <DT>: tópico da lista descritiva; $" não há limite para o número de tópicos; $" não é necessário a TAG </DT>; 3. <DD>: descrição da lista descritiva: $" para cada TAG <DT> existe uma TAG <DD>; $" não é necessário a TAG </DD>; 4. </DL>: fim da lista descritiva. 26

27 <HTML> <HEAD> <TITLE> Listas Descritivas </TITLE> </HEAD> <BODY> <H3><I>Exemplo de Listas Descritivas</I></H3> <DL> <DT><B>Listas Não Ordenadas:</B> <DD>As listas não ordenadas ou pontuadas inserem&nbsp<i>marcadores</i>&nbspna frente de cada item. <DT><B>Listas Ordenadas:</B> <DD>As listas ordenadas ou numeradas inserem&nbsp<i>números</i>&nbspou&nbsp <I>letras</I>&nbsp na frente de cada item. <DT><B>Listas Descritivas:</B> <DD>As listas descritivas ou de grossário são diferentes das outras listas. Cada item de uma lista descritiva tem dois componetes: um <I>tópico</I> e uma <I>descrição de tópico</i>. </DL> </BODY> </HTML> #"Listas Intercaladas: Pode ser utilizada para você criar listas hierárquicas, mesclando listas ordenadas e não numeradas. É utilizado para melhor organizar a estrutura de tópicos; utilizados como links, mapa de sites. 27

28 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto passando na tela para o texto digitado entre o início e o fim da tag. Permite que uma imagem possa correr de um lado para o outro na página também. Deve ser utilizado quando você desejar dar um destaque a uma frase, palavra ou até mesmo a um parágrafo da página. Com cautela, sem exageros para não chamar a atenção do usuário ficando voltado somente para o destaque, deixando de lado o restante da página. Comando: <MARQUEE> Texto ou imagem </MARQUEE> Atributos: 1. <MARQUEE>: $" abertura da TAG de movimento; 2. ALIGN= posição : Posição em relação ao browser, que pode ser: $" top: alinha o texto com o topo do marquee; $" middle: alinha o texto com o centro do marquee; $" bottom: alinha o texto com a base do marquee; 3. BEHAVIOR= controle : Controla o comportamento do texto dentro do marquee, que pode ser: $" scroll: faz que o texto entre por um dos cantos e saia por outro, $" slide: o texto entra por um dos cantos e do marquee e para ao chegar ao canto oposto; $" alternate: o texto fica passando de um canto para o outro dentro do marquee; 4. BGCOLOR= # : Muda a cor do fundo do marquee, valores em hexadecimais, ver tabela de cores anexas a esta apostila; 5. DIRECTION= direção : Define a direção no qual o texto se move, pode ser: $" left: faz o texto correr para a esquerda; $" right: faz o texto correr para a direita; 6. HEIGHT= altura : Define a altura do marquee, sendo que n é um valor em pixel ou um porcentual da altura da janela; 7. WIDTH= n ou n% : Define a largura do marquee, sendo que n é um valor em pixel ou um porcentual da altura da janela; 8. HSPACE= n : Define margens a esquerda e a direita do marquee, sendo que n é um valor em pixels; 9. VSPACE= n : Define margens acima e abaixo do marquee, sendo que n é um valor em pixels; 10. LOOP= n : Define quantas vezes o texto irá cruzar o marquee, sendo que n é o número de vezes. Se n for igual a 1 ou infinite, ele irá passar pelo marquee infinitamente; 11. SCROLLAMOUNT= n : 28

29 Controla a velocidade do texto, definindo o número de pixels entre cada redesenho do texto, sendo que n é o valor em pixels que separa cada redesenho do texto, quanto maior o n, maior o movimento do texto; 12. SCROLLDELAY= n : Controla a velocidade do texto ao definir os intervalos de redesenho do texto, sendo que n é o valor em milisegundos do intervalo de redesenho do texto, quanto menor o n, mais rápido o movimento do texto; 13. </MARQUEE>: Encerra a TAG marquee. Visualizando exemplo: Para visualizar o exemplo e necessário estar com o navegador aberto para execução da animação. 29

30 ENDEREÇOS Normalmente utiliza-se o final da página para colocar informações sobre o autor da página, data da última alteração e outras informações que achar necessário. Para isso utiliza-se: A TAG <ADDRESS> Comando: Tudo que fica dentro dela fica em itálico. <ADDRESS> Informações a serem dispostas sobre o autor </ADDRESS> <html> <head> <title>address</title> </head> <body bgcolor="#ffffff"> <div align="left"> <img src="../imagens/ufpel_pagina.jpg" width="307" height="254"><br> <ADDRESS> <br> </div> <ADDRESS> <br> UNIVERSIDADE FEDERAL DE PELOTAS<br> Campus Universitário, s/n - Caixa Postal 354<br> CEP Pelotas, RS - BRASIL<br> PABX: (53) FAX: (53) <br> CNPJ: / <br> <br> </ADDRESS> </ADDRESS> </body> </html> 30

31 INTERLIGANDO DOCUMENTOS LINKS O principal poder do HTML vem da capacidade de interligar partes de um texto, imagens a outros documentos. A interligação entre documentos não se restringe somente as ligações com outras páginas. Em páginas muito longas onde um assunto tem vários tópicos, podemos utilizar índices onde os links tem a função de interligar os tópicos de um texto e que com apenas um clique em um dos tópicos do índice, o item é exibido. LINKS PARA MESMO DIRETÓRIO: Você só precisa especificar o nome do arquivo que será chamado e a sua extensão. Sintaxe de comando: <A HREF= nome do arquivo.extensão > Texto ou imagem </A> Onde: $" A: abertura da TAG de link; $" HREF= nome do arquivo.extensão : deve ser informado o nome completo do arquivo que será acessado; $" Texto ou imagem: que servirá como link; $" /A: encerra a TAG de link. Observação: Não deixar espaço em branco entre <A> e </A>. 31

32 LINKS PARA OUTROS DIRETÓRIOS OU PASTAS: Para criar links para uma página localizada em outros diretórios é necessário indicar o caminho completo do arquivo. Para a WEB isto tem uma forma um pouco diferente do Windows e do DOS, veja: $" A barra utilizada para separar diretórios é a barra convencional (/); $" O ponto de partida para localizar um arquivo em outro diretório é o atual; $" Para baixar um nível deve utilizar os sinais../ ; Neste exemplo foi criado um link na página index.htm que acessa a página primeira.htm, localizada dentro da pasta página. Para inserir um link na página entrada.htm, - localizada dentro da pasta pagina - a página index.htm, que esta um diretório abaixo, temos que descer um diretório, para isso utiliza-se dois pontos.. como no exemplo ao lado: LINKS PARA OUTROS SERVIDORES: 32 Para criar um link para arquivos localizados em qualquer parte do mundo é necessário indicar a URL do arquivo. URL é a abreviatura de Uniform Resource Locator. Tem a função de especificar a localização de páginas ou arquivos em servidores da WEB. Composta de duas partes:

33 #"O protocolo Internet do documento; #"O endereço do servidor da página. Comando: <A HREF= protocolo://servidor.arquivo > Texto ou imagem </A>. Onde: protocolo: é o tipo de servidor que está sendo acessado; Os mais utilizados são: #"http: Hiper Text Transfer Protocol, é um servidor da WWW; #"ftp: File Tranfer Protocol, é um serviço para a troca de arquivos, programas entre um servidor e um computador remoto; o servidor: é o computador que contém a página; o arquivo: é o nome do arquivo (diretório e nome do arquivo). O protocolo do servidor deve ser seguido: o Dos símbolos :// ; o Do endereço do computador remoto. <body bgcolor="#ffffff"> <div align="center"> <h3>link PARA OUTROS SERVIDORES</h3> <br> <A HREF=" quot;><a href=" src="../imagens/simbolo_ufpel.gif" width="110" height="108" border="0" align="middle"></a> </A> </div> </body> LINKS PARA MESMA PÁGINA: É muito simples. Definem-se seções na página, sendo que cada terá um nome que servirá de referência para o link. ÂNCORAS: Para ter links em uma mesma página, deve-se criar uma âncora no início de cada seção que será acessada por um link. É um ponto de referência ou endereço que será acessado por um link. Utilizada para marcar o início de cada seção da página. O nome da âncora será a referência utilizada pelo link que a acessará. Para criar ou acessar uma âncora deve-se utilizar a TAG de vínculo, com atributos diferenciados. 33

34 Criando Âncoras: Com este atributo você escolhe um local da página para inserir uma âncora. Esta TAG fica invisível ao usuário. Pode ser visualizada no código fonte. Normalmente utilizado em páginas com mais de uma tela do navegador e inserida no topo do documento <A NAME= nome da seção ></A> #"A: abertura da TAG de link; #"NAME= nome da seção : cria o nome da seção, marcando o início da seção; #"Não é necessário inserir nada entre os campos <A> e </A>; #"</A>: encerra a TAG. Linkando Âncoras: Com esta TAG você irá inserir uma imagem ou texto que indica ao usuário que ao clicar neste tipo determinado de link ele irá para o local onde foi inserida uma âncora. <A HREF= #Nome da Seção > Texto ou imagem </A> $" A: abertura da TAG de link; $" HREF= #Nome da Seção : nome da seção que deve ser acessada; $" </A>: encerra a TAG de link IMPORTANTE: O símbolo # indica ao navegador que o link se encontra na mesma página. É indispensável o uso de "#. CRIANDO LINKS PARA O SEU Você deve informar o seu endereço eletrônico na TAG de LINK. Sintaxe de comando: <A HREF= mailto:endereço > Texto ou imagem </A> $" mailto: informa ao browser que o link é para um endereço eletrônico $" endereço: é o endereço de <body bgcolor="#ffffcc"> INSERINDO LINK PARA O SEU <br> <A HREF="mailto:seu_e_mail@domínio "><a href="mailto:seu_e_mail@dom% EDnio">Clique aqui<br> <img src="../imagens/ 1.gif" width="90" height="90" align="middle" border="0"><br> para enviar<br>um </a></a><br> Você pode inserir imagem, texto ou os dois conforme o exemplo para indicar seu . </div></body> 34

35 LINK DE DISPOSIÇÃO DE ARQUIVOS PARA DOWNLOADS Basta no link referenciar um arquivo com a extensão *.EXE, *.ZIP E ao clicar no link aparecerá: Clique neste ponto para salvar seu arquivo. Escolha o local de destino para salvar o seu documento. Download em andamento. Processo de cópia do arquivo e salvamento para o local de destino pré-determinado Download concluído: - Abrir: executa o arquivo do download; - Abrir pasta: pasta onde foi salvo o arquivo; - Fechar: fecha a janela de download. 35

36 IMAGENS GRÁFICAS Atualmente a maioria dos browsers exibe imagens, porém não é qualquer tipo de arquivo imagem que deve ser inserido em HTML. Os formatos mais aceitos na WEB são GIF e JPEG. GIF e JPG O formato GIF (Grafics Interchange Format) pode ser utilizado em diferentes plataformas de hardware (PC e Macintosh), suporta no máximo 256 cores e gera arquivos menores, com extensão.gif. este formato é muito utilizado para desenhos e gráficos. O formato JPEG (Joint Photographic Engineering Group) suporta 16 milhões de cores e pode reduzir o tamanho de uma imagem até dez vezes. Gera arquivos com a extensão.jpg e.jpeg. muito utilizado para fotos. Utilizar imagens de dimensões pequenas, gravadas no formato JPEG (no caso de fotografias) ou GIF (melhor para desenhos, em preto-e-branco ou com poucas cores). Tenha cuidado com as GIFs animadas; elas podem ocupar bastante espaço em disco, dependendo do número de cores e quadros de animação. Estes cuidados também farão a sua página carregar mais rapidamente, tornando a visitação mais agradável. INSERINDO UMA IMAGEM - <IMG SRC= nome do arquivo.extensão > <IMG SRC= nome do arquivo.extensão WIDTH= n HEIGHT= n ALIGN= posição ALT= mensagem BORDER= n > Onde: SRC= nome do arquivo.extensão : é o nome do arquivo e sua extensão; imagens_graficas.htm <HTML> <HEAD> <TITLE> Imagens Gráficas </TITLE> </HEAD> <BODY> <center> <H2>INSERINDO UMA IMAGEN</H2> <BR> <h3>cancun BEACH</h3><BR> <img src="../imagens/cancun_beach.jpg"> </center> </BODY> </HTML> 36

37 DIMENSIONANDO AS IMAGENS: O tamanho das imagens exibido pelo navegador pode ser alterado. Recurso este muito utilizado para a criação de trumbnails, que são pequenas imagens que servem como links para imagens maiores. O tamanho do arquivo da imagem não é alterado. Podemos redimensionar a figura através dos atributos a seguir: 1. WIDTH= n : Altera a largura da imagem. Valores dados em pixels. 2. HEIGHT= n : Altera a altura da imagem. Valores dados em pixels. <HTML> <HEAD> <TITLE> Redimensionando Imagens Gráficas </TITLE> </HEAD> <BODY> <H2 align="center">redimensionando<br> Imagens Gráficas</H2> <CENTER> <H3>Tamanho original da paisagem: 300 x 197 pixels - 20k</H3> <p><img src="../imagens/paisagem.jpg"> <BR> widht="240" height="137"<br> <IMG SRC="../imagens/paisagem.jpg" widht="240" height="137" ALIGN="middle"><BR> widht="160" height="57"<br> <IMG SRC="../imagens/paisagem.jpg" widht="160" height="57" ALIGN="middle"> </p> </CENTER> </BODY> </HTML> Nota: As figuras redimensionadas podem perder um pouco a sua definição. ALINHAMENTO DA IMAGEM: ALIGN= posição : Em relação ao navegador: $" Right: alinhamento a direita; $" Left: alinhamento a esquerda(padrão dos navegadores); imagens_alinhadaas_navegador.htm 37

38 <HTML> <HEAD> <TITLE> Imagens Alinhadas em relação ao navegador </TITLE> </HEAD> <BODY> <h3 align="center"> Imagens Alinhadas em Relação ao Navegador </h3> <BR> Alinhamento a direita: <img src="../imagens/dexter_laboratory2.jpg" align="right" width="90" height="90"> <BR> Alinhamento a esquerda: <img src="../imagens/dexter_laboratory2.jpg" align="left" width="90" height="90"> <BR> <center>alinhamento centralizado<br> com a TAG CENTER:<br> <img src="../imagens/dexter_laboratory2.jpg" width="90" height="90"> </center> </BODY> </HTML> Em relação ao texto: $" Top: alinhamento pelo topo da imagem; $" Bottom: alinhamento pela base da imagem; $" Middle: alinhamento pelo centro da imagem; imagens_alinhadas_texto.htm <BODY> <H2> Imagens Alinhadas em Relação ao Texto </H2> <BR><BR> Alinhamento pelo topo da imagem: <img src="../imagens/praia.jpg" ALIGN="top"><BR><BR> <hr align="center" size="2" widht="80%"><br><br> Alinhamento pela base da imagem: <img src="../imagens/praia2.jpg" ALIGN="bottom"><BR><BR> <hr align="center" size="2" widht="80%"><br><br> Alinhamento pelo centro da imagem: <img src="../imagens/praia3.jpg" ALIGN="middle"><BR><BR> <hr align="center" size="2" widht="80%"><br><br> </BODY> 38

39 DEMAIS ATRIBUTOS $" ALT= mensagem : Este atributo tem a função de exibir uma mensagem no lugar da imagem enquanto ela é carregada. Quando o navegador não exibe imagem a mensagem é exibida em seu lugar. Também tem a função de especificar, indicar sobre uma imagem, quando o cursor é colocado sobre a imagem. imagens_com_alt.htm <HTML> <HEAD> <TITLE> Imagens com mensagens </TITLE> </HEAD> <BODY> <center><h3>iserindo UMA MENSAGEM EM UMA IMAGEM</H3> <BR> <img src="../imagens/peixes.jpg" ALT="Peixes no Lago. Este é mais um exemplo de mensagens em uma imagem. Visualizada quando o mouse passa por cima da imagem."> </center> </BODY> </HTML> $" BORDER= n : Podem ser definidas diferentes tamanhos de bordas para uma imagem, em pixels imagens_bordas.htm <BODY> <center> <H2>INSERINDO BORDAS <BR> EM IMAGENS</H2> <BR> <img src="../imagens/animaniacs.jpg" BORDER="0" ALT="Animaniacs sem bordas"> <img src="../imagens/animaniacs.jpg" BORDER="5" ALT="Animaniacs com borda 5"> <img src="../imagens/animaniacs.jpg" BORDER="10" ALT="Animaniacs com borda 10"> </center></body> 39

40 INSERINDO SOM TAG <BGSOUND> - Sem player disponível ao usuário: Este comando carrega um arquivo de áudio como trilha sonora enquanto a página esta sendo visualizada. Quando a página é encerrada a execução do som também é finalizada. Comando <BGSOUND SRC= nome_arquivo.extensão LOOP= INFINITE > #"SRC= nome_arquivo.extensão : define o nome de arquivo de áudio a ser carregado durante a execução da página. #"LOOP= n : n define quantas vezes o arquivo de áudio será executado. Se n for igual a 1 ou INFINITE, o arquivo será executado infinitamente durante a visita na página. Nota: #"Esta TAG de som pode ser inserida em qualquer ponto da página, dentro da marcação <BODY></BODY>; #"Procure não inserir arquivos de áudio muito grandes para diminuir o tempo de acesso a página para os usuários que tem conexão discada(modem 56Kb). #"Suporta os seguintes formatos de arquivos de áudio: o *.wav; o *.midi; o *.au; o *.mp3 TAG <EMBED> - Player visível ao usuário: Com esta TAG é possível o internauta interagir no som disponível na página. Comando: <embed width="120" height="50" src="nome do arquivo.extensão" autostart="false" showstatusbar="1" showdisplay="1"> #"width: largura do player #"height: altura do player #"src: local relativo ou absoluto do arquivo (.mid,.wav,.mp3,.wma;.au) #"autostart: se true, o arquivo de midia será inicializado automatimente, se false ficará em modo parado #"showstatusbar: se 1 exibe o status do arquivo de midia, se 0 oculta as informações #"showdisplay: se 1 exibe informações sobre o arquivo de midia, se 0 oculta as informações 40

41 <html> <head> <title>som NA PÁGINA - <EMBED></title> </head> <body bgcolor="#f7ffd2"> <div align="center"><embed width="120" height="45" src="../sons/avril_lavigne_complicated.mid " autostart="false"></embed><br> Neste exemplo: <br> <EMBED WIDTH="120" HEIGHT="45" SRC="../sons/complicated.midi" AUTOSTART="false"> </font></div> </body> </html> 41

42 TABELAS Muito utilizadas para organizar as páginas de internet hoje em dia. Também para modelar o layout das home pages, organizar dados na web. Pode ser inserido texto, imagens gráficas, links. Em primeiro momento você pode achar difícil a compreensão das TAG s utilizadas nas tabelas, mas isto é só num primeiro momento de contato com estes códigos. Mas depois torna-se muito fácil a sua utilização e interpretação para corrigir possíveis falhas em um editor de HTML qualquer. Pode também ser utilizada dentro de outras tabelas, melhorando a disposição dos conteúdos de sua página MARCAÇÕES BÁSICAS PARA DESENVOLVER TABELAS EM HTML: <TABLE> </TABLE>: Ete é o comando para se inserir a tabela, esta TAG deve ser encerrada. Antes e depois de inserir uma tabela, sempre acontece uma quebra de linha <TR> </TR>: Table Row Serve para inserir linhas em uma tabela <TD> </TD>: Table Data Este comando insere células, em cada linha. Define os dados da tabela. DESENVOLVENDO UMA TABELA SIMPLES: tabelas.htm <TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1> <TR> <! Cria a primeira linha da tabela> <TD>Primeira célula </TD><! Aqui foi criada uma célula> <TD>Segunda célula </TD> <TD>Terceira célula </TD> </TR><! Fecha a primeira linha da tabela> <TR><! Abre a segunda linha da tabela> <TD>Primeira célula </TD> <TD>Segunda célula </TD> <TD>Terceira célula </TD> </TR><! Encerra a Segunda linha da tabela> </TABLE><! Encerra a tabela> *Com isto você já consegue Ter uma idéia de como montar suas tabela. O segredo para se conseguir fazer estas tabelas de forma eficiente é planejar e ter a idéia exata do conteúdo desta tabela. **Nas células da tabela você pode inserir desde simples frases até figuras inteiras. ***Parâmetros podem ser acrescidos às tabelas, tais como : aumentar ou diminuir a largura de uma célula; distanciar as células uma das outras; inserir cor de fundo dentro da célula etc. 42

43 <TH> </TH>: Table Header Define os títulos das tabelas. Podem ser posicionados em qualquer célula.quando inserido como o Table Data, as informações contidas dentro desta TAG aparecem em negrito. tabelas_table_header.htm <table border="1" width="400"> <td>novos Cadastros</td> <th>outubro</th> <th>novembro</th> <th>dezembro</th> <th>alunos</th> <td>10</td> <td>3</td> <td>16</td> <th>professores</th> <td>3</td> <td>7</td> <td>11</td> </table> <CAPTION> </CAPTION>: Esta TAG insere a legenda da Tabela. Inserir entre <TABLE> e </TABLE>. tabela_caption.htm <table BORDER="1" WIDTH="80%"> <caption>legenda ENTRE CAPTION</caption> <th align="center">uso de Table Header - TH</th> <td align="center">uso de Table Data - TD</td> </table> 43

44 ATRIBUTOS DE CONTROLE DE TABELAS: WIDTH= valor ou % : Com este atributo é possível alterar a largura da tabela em relação ao navegador. Também a largura das células, como no exemplo que segue. Para alterar a largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag <TD>. tabela2.htm <table BORDER="2"> <td WIDTH="25%">WIDTH=25%</td> <td ALIGN="MIDDLE" WIDTH="75%">WIDTH=75%</td> </table> <br> <br> <div align="center"> <center> <table BORDER="2"> <td WIDTH="100">WIDTH=100</td> <td ALIGN="MIDDLE" WIDTH="200">WIDTH=200 (PIXELS)</td> </table> BORDER= n : Com este abributo é possível colocar em maior destaque uma determinada tabela. O número da espessura de uma tabela é definida em pixels. tabela_atribuindo_bordas.htm <table border="5" width="300" align="center"> <td width="33%" align="center">l1 - C1</td> <td width="33%" align="center">l1 - C2</td> <td width="34%" align="center">l1 - C3</td> 44

45 <td width="33%" align="center">l2 - C1</td> <td width="33%" align="center">l2 - </td> <td width="34%" align="center">l2 - C3</td> </table> ATRIBUINDO BORDER= 3 E BORDER= 0 Sintaxe de comando: <table border="0" width="400"> <td width="50%" align="center"> Tabela com BORDER="3"&nbsp ; table border="3" width="90%"> <td width="50%" align="center">grêmio</td> <td width="50%" align="center">juventude</td> <td width="50%" align="center">pelotas</td> <td width="50%" align="center">brasil</td> </table> </td> <td width="50%" align="center"> Tabela com BORDER="0" <table border="0" width="90%"> <td width="50%" align="center">são Paulo</td> <td width="50%" align="center">bahia </td> <td width="50%" align="center">palmeiras </td> <td width="50%" align="center">internacional </td> </table> </td> </table> *Neste exemplo foram colocadas duas tabelas dentro de uma tabela. 45

46 ALIGN= posição : Este atributo controla o alinhamento do conteúdo dentro das TAG s TD, TR, TH. Podem ser: $" left: alinhamento a esquerda; $" center: alinhamento centralizado; $" right: alinhamento a direita. tabela_alinhamentos.htm <table border="1" width="474"> <td width="152" align="center"><b>p RIMEIRA CÉLULA</b></td> <td width="147" align="center"><b>s EGUNDA CÉLULA</b></td> <td width="153" align="center"><b>t ERCEIRA CÉLULA</b></td> <td width="152" align="center">align="left"</td> <td width="147" align="center"> ALIGN="center"</td> <td width="153" align="center"> ALIGN="right"</td> <td width="152">esquerda</td> <td width="147"> <p align="center">centro</td> <td width="153"> <p align="right">direita</td> </table> *Quando adicionado dentro da TAG <TABLE>, o alinhamento será em relação ao navegador, que pode ser: $" ALIGN= left : alinhamento a esquerda (padrão, não é necessário especificar); $" ALIGN= center : alinhamento centralizado; $" ALIGN= right : alinhamento a direita. 46

47 VALIGN= posição : Controla o posicionamento do conteúdo dentro dás células. Pode ser: $" top: alinhamento superior; $" middle: alinhamento centralizado; $" bottom: alinhamento inferior; Pode ser adicionado dentro das TAG s TR,TD, TH. <table border="1" width="474"> <td width="234" align="center"><b>controle do posicionamento dos conteúdos das células pode ser:</b></td> <td width="91" valign="top" align="center"><b>top</b></td> <td width="91" valign="middle" align="center"><b>middle</b></td> <td width="91" valign="bottom" align="center"><b>bottom</b></td> </table> 47

48 CELLSPACING= valor em Pixels : Este atributo compreende a distância entre células e linhas. Deve ser adicionado dentro da TAG <TABLE>. Como padrão dos navegadores a distância é 2 pixels <table border="1" width="80%" ALIGN="center" cellspacing="6"> <td width="33%" align="center"><b><font size="2" face="arial Narrow">CELLSPACING="6 "</font></b></td> <td width="33%" align="center"> </td> <td width="34%" align="center"> </td> <td width="33%" align="center"> </td> <td width="33%" align="center"><b><font size="2" face="arial Narrow">CELLSPACING="6"</font></b></td> <td width="34%" align="center"> </td> <td width="33%" align="center"> </td> <td width="33%" align="center"> </td> <td width="34%" align="center"><b><font size="2" face="arial Narrow">CELLSPACING="6"</font></b></td> </table> CELLPADDING= valor em pixels : Este atributo é utilizado para formatar o espaço entre o conteúdo de uma célula e suas bordas em todos os sentidos. É aplicado dentro da TAG <TABLE> 48

49 <table border="1" width="80%" align="center" cellpadding="8"> <td width="33%" align="center">pêra</td> <td width="33%" align="center">mamão</td> <td width="34%" align="center">abacaxi</td> <td width="33%" align="center">kiwi</td> <td width="33%" align="center">melancia</td> <td width="34%" align="center">morango</td > <td width="33%" align="center">abacate</td> <td width="33%" align="center">melão</td> <td width="34%" align="center">mirtilo</td> </table> NOWRAP: sem quebra de linha Este atributo evita a quebra de linha dentro da célula. O texto inserido dentro do campo não pode ser dividido em mais de uma linha. Deve ser adicionado dentro do <TD>. <table border="1" width="100%" align="center"> <td width="50%" nowrap>célula com NOWRAP. O texto fica sem quebra de linha.</td> <td width="50%">ao contrário desta célula que não foi adicionado, o texto sofre quebra de linha.</td> </table> *Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muito dos alinhamentos que encontramos na Internet é feito por intermédio de tabelas. 49

50 **Você também pode usar todos os outros recursos já vistos de HTML para otimizar o uso de tabelas. ROWSPAN= n : Define quantas linhas uma mesma célula pode abranger. Por padrão, na maioria dos navegadores de internet cada célula adicionada em uma tabela corresponde a uma linha. Pode ser aplicado em TH ou TD, proporcionando a mesmo efeito. tabelas_rowspan.htm <table border="1" width="380" cellpading="7" align="center"> <td width="16%" rowspan="3">3 linhas</td> <td width="16%">coluna 2</td> <td width="16%">coluna 3</td> <td width="17%">coluna 4</td> <td width="17%">coluna 5</td> <td width="16%">coluna 2</td> <td width="16%">coluna 3</td> <td width="17%">coluna 4</td> <td width="17%">coluna 5</td> <td width="16%">coluna 2</td> <td width="16%">coluna 3</td> <td width="17%">coluna 4</td> <td width="17%">coluna 5</td> </table> COLSPAN= n Este atributo define quantas colunas uma célula pode abranger. Por padrão, na maioria dos navegadores de internet cada célula adicionada em uma tabela corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a mesma abrangência. 50

51 tabelas_colspan.htm <table border="1" width="80%" align="center"> <td width="24%" colspan="3">célula COM 3 COLUNAS</td> <td width="20%">coluna 4</td> <td width="20%">coluna 5</td> <td width="20%">coluna 1</td> <td width="20%">coluna 2</td> <td width="20%">coluna 3</td> <td width="20%">coluna 4</td> <td width="20%">coluna 5</td> </table> INSERINDO FIGURAS E CORES COMO PLANO DE FUNDO Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna particularmente útil quando se quer dar destaque a uma célula em especial. <table border=0> <td width=150 bgcolor=red>vermelho </td> <td width=150 bgcolor=blue>azul </td> <td width=150 bgcolor=red>vemelho</td> <td width=150 bgcolor=blue>azul</td> <td width=150 bgcolor=red>vemelho</td> <td width=150 bgcolor=blue> azul</td> </table> 51

52 COLOCANDO UMA IMAGEM DE FUNDO NAS TABELAS Um recurso parecido com a cor de fundo, colocar uma imagem como fundo de uma tabela é uma técnica muito usada. Através do complemento BACKGROUND dentro da tag TABLE, basta indicar qual o endereço e o nome da figura. <TABLE BACKGROUND="nome do arquivo.extensão" BORDER=5> <TR> <TD>imagem</TD> </TR> </TABLE> USANDO TABELAS COMO MOLDURAS: Um outro uso bastante interessante de tabelas é como moldura para alguma figura. Para isto basta você iniciar uma tabela e definir um valor para BORDER. <TABLE BORDER=5> <TR> <TD> <IMG SRC=endereço/nome da figura.extensão> </TD> </TR> </TABLE> Claro que você deve usar com muito bom senso este artifício da tag <TABLE>, pois nem sempre uma moldura em uma figura define um bom layout (aparência) na sua home-page. 52

53 FORMATANDO LINHAS INTERNAS RULES= complementos Para escolher as linhas internas que serão mostradas dentro da tabela, usamos o atributo RULES, dentro da tag <TABLE>. Os complementos desse atributo são : $" none : nenhuma linha interna ; Sem as linhas internas de uma tabela tanto horizontais quanto verticais, como pode ser visto no exemplo a seguir tabelas_rules_none.htm <table border="1" width="300" rules="none"> <td width="20%" align="center">alberto</td> <td width="20%" align="center">fabiana</td> <td width="20%" align="center">denis</td> <td width="20%" align="center">alex</td> <td width="20%" align="center">jaqueline</td> <td width="20%" align="center">lisla</td> <td width="20%" align="center">giovane</td> <td width="20%" align="center">cátia</td> <td width="20%" align="center">sandra</td> <td width="20%" align="center">darlan</td> <td width="20%" align="center">heloisa</td> <td width="20%" align="center">iara</td> </table> $" rows : sem linhas verticais internas Este complemento do atributo RULES, retira a visualização das linhas verticais internas entre cada célula da tabela. Não dedixando de permitir a organização do conteúdo interno das tabelas. tabelas_rules_rows.htm <table border="2" RULES="rows" width="300"> 53

54 <td width="25%">papel</td> <td width="25%">disquete</td> <td width="25%">cadernos</td> <td width="25%">corretivo</td> <td width="25%">grafite</td> <td width="25%">caneta</td> <td width="25%">lapizeira</td> <td width="25%">calculadora</td> <td width="25%">tesoura</td> <td width="25%">pincel</td> <td width="25%">lápis</td> <td width="25%">borracha</td> </table> $" cols: sem linhas horizontais entre cada coluna da tabela ; tabelas_rules_cols.htm <table border="2" RULES="cols" width="300"> <td width="25%">papel</td> <td width="25%">disquete</td> <td width="25%">cadernos</td> <td width="25%">corretivo</td> <td width="25%">grafite</td> <td width="25%">caneta</td> <td width="25%">lapiseira</td> <td width="25%">calculadora</td> <td width="25%">tesoura</td> <td width="25%">pincel</td> <td width="25%">lápis</td> <td width="25%">borracha</td> </table> 54

55 Observação: As tabelas são um recurso de modelagem das home-pages hoje em dia. Alguns comandos HTML não funcionam em um dado navegador, se você reparou para falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos : Internet Explore 4.0 e no Netscape Communicator 4.0. Você não reparou nenhuma diferença no uso destes navegadores para nossos exemplos, a questão é que para tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo típico é uso de CELLSPACING e CELLPADDING. Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo quanto a padronização de seus navegadores. Sendo assim, quando você construir tabelas deve sempre levar em conta em qual navegador você dará preferência para rodar a sua página. Por isso nunca é demais deixar claro à sua home-page em qual navegador ela roda melhor a sua formatação. 55

56 FRAMES É um recurso que permite dividir uma página de internet em outras, na mesma página. Nada mais é que uma página que chama outras na página inicial que um documento html que contém frames. Também chamados de moldura. Alguns programas como o Macromedia Dreamweaver, por exemplo, em português. Em um determinado arquivo como o index.htm, é onde pode ser definido a estrutura das novas janelas para o seu HTML. O quantidade de frames utilizados é definido por <FRAMESET>, cada frame chama uma página de internet diferente, a ser apresentada em cada frame. Onde cada página de uma frame interage com outra. Normalmente é utilizado na página de abertura (index.htm). Estrutura de um frame São utilizados um conjunto de TAG s, cada qual com sua função: <FRAMESET>: É a TAG de inserção para a elaboração de um conjunto de frames com seu elementos. O FRAMESET aceita os atributos COLS e ROWS, referentes a divisão das janelas que pode ser horizontal ou vertical. E internamente só podem ser utilizadas as marcações FRAMESET, FRAME ou NOFRAMES. Atributos utilizados: #"COLS= colunas, largura : Define o número de colunas a ser utilizado, o valor pode ser em pixels ou porcentagem. É neste atributo que é definido o número de quadros usados em um frame. #"ROWS= linhas, altura : Tem a mesma função do atributo COLS, só que este é para as linhas de um frame. #"FRAMEBORDER= 0 : Você pode atribuir borda na divisa de frames, 0 sem borda e 1 com borda <FRAME>: Define o frame a ser criado. Não é utilizada a Tag de encerramento </FRAME>, pois não necessita. Define cada janela contida em um área, não necessita da TAG de finalização (/FRAME). Atributos utilizados: #"SRC= URL : Endereço do arquivo e extensão que será exibido no frame #"NAME= nome da janela : Este atributo é utilizado para associar um nome a uma janela. Utilizado para criar alvos de um frame para outro. 56

57 #"MARGINWIDTH= valor : Controla as margens de cada frame, a direita ou esquerda. Distância entre os conteúdos de cada página e as margens da janela. #"MARGINHEIGHT= valor : Tem a mesma função do MARGINWIDTH, só que controla as margens superiores e inferior. #"SCROLLING= yes, no ou auto : É um atributo opcional. Define se uma janela deve ou não possuir barra de rolagem. O padrão utilizado, caso não especificar é auto, sendo assim o seu navegador irá aplicar quando neceessário. #"NORESIZE: Este atributo não possue complementos. Quando não adicionado a TAG <FRAME>, o usuário poderá alterar o tamanho das janelas, movendo as bordas das janelas com o cursor. Por padrão todas as janelas podem ter seu tamanho alterado, mas é bom colocar este atributo para não modificar o layout de sua página. <NOFRAMES>: Esta TAG é utilizada para informar a alguns usuários de que seu navegador de internet não suporta FRAMES. Hoje em dia a maioria dos navegadores não tem este problema, como os antigos navegadores IE 2.0. Permite a navegação em primeira página somente. Sendo assim colocar as informações de como atualizar o navegador do usuário para poder visualizar a sua página corretamente. Esta TAG deve ser encerrada com </NOFRAMES> e inserida dentro de frameset. <FRAMESET> <NOFRAMES> Informações a serem dispostas aqui sobre a impossibilidade de navegar com frames em uma página. </NOFRAMES> </FRAMESET> INTERLIGANDO DOCUMENTOS ENTRE FRAMES: A marcação: TARGET= complementos : Utilizada opcionalmente na TAG de links, permite controlar o alvo em que uma determinada página irá abrir, ou seja, em que frame específico deverá aparecer. Complementos do atributo alvo (TARGET): #"nome do frame: Indica em qual frame deverá ser aberta a nova janela indicada por um link em um frame diferente. Não é necessário indicar caso a janela a ser aberta deverá ser localizada no mesmo frame; #"_blank: Convenciona ao navegador que ele deverá abrir uma janela, em branco por um determinado link, para visualizar a página indicada por ele; 57

58 EXEMPLO USO DE FRAMES: Criar uma página principal: frames.htm Subdividida em dois frames, dispostos em colunas: Coluna 1 25% de largura Nome: frame_1.htm Coluna 2 - * de largura O navegador disponibilizará a esta janela o restante da tela utilizada pelo navegador para o lado direito Nome: frame_2.htm Arquivo: frame_1.htm <html> <head> <title>frame 1</title> </head><body><div align="center"> <font size="4" face="arial Black">FRAME 1.HTM</font><br><a href="frame_2.htm" target="frame_2">frame 2 (Página Inicial)</a><br><br><br> <a href="frames_ancoras.htm" target="frame_2">âncoras</a><br> <a href="frames_imagens_fundo.htm" target="frame_2">backgrounds na Página</a><a href="frames_tabela _backgrounds.htm" target="frame_2"> Backgrounds em Tabelas</a></div> </body> </html> Arquivo: frame_2.htm <html> <head> <title>frame 2</title> </head> <body> <div align="center"> <font size="4" face="arial Black"> FRAME 2.HTM <br><br> PÁGINA INICIAL </font> </div> </body> </html> 58

59 INTERLIGANDO OS DOCUMENTOS PARA A PÁGINA COM FRAMES: Arquivo: frames.htm <html> <head> <title> *** PÁGINA COM FRAMES *** </title> </head> <frameset cols="25%,*" frameborder="1"> <frame name="frame_1" src="frame_1.htm" noresize scrolling="no"> <frame name="frame_2" src="frame_2.htm" noresize scrolling="auto"> <noframes> Seu computador não comporta frames <br><br> Atualize a versão do seu navegador: <br><br><a href=" ownload.micr osoft.com/do wnload/ie6sp 1/finrel/6_sp 1/ W98NT42K MeXP/PT- BR/ie6setup. exe"> --- CLIQUE AQUI --- </a> </noframes> </frameset> </html> 59