Curso de HTML Básico e Avançado by Flavio Bacelar

Governo do Estado do Pará Secretaria de Estado de Educação Secretaria Adjunta de Ensino Diretoria de Educação para Diversidade, Inclusão e Cidadania Coordenação de Tecnologia Aplicada à Educação

NÚCLEO DE TECNOLOGIA EDUCACIONAL DE ANANINDEUA CURSO DE HTML

Ananindeua-PA

Simão Jatene Governador do Estado do Pará Nilson Pinto de Oliveira Secretário de Educação Claudio Cavalcanti Ribeiro Secretário Adjunto de Ensino Aldeise Gomes Queiroz Diretoria de Educação para Diversidade, Inclusão e Cidadania

Marcelina Henriques Coordenadora do Núcleo de Tecnologia Educacional e do PROINFO

Antônio cunha Coordernador do NTE Ananindeua-PA

Flávio Bacelar Ministrante do Curso

PRIMEIRO CONTATO

Seja Bem vindos Professores, multiplicadores e Bolsistas dos espaços educativos! É com muito prazer que vamos contar uma nova história no conhecimento básico de programação em HTML.

O que é HTML ? Para que serve ? HTML é a acrossemia de HyperText Markup Language, é uma das linguagens utilizadas para desenvolver páginas na internet, existem outras linguagens mais avançadas como: JavaScript, PHP, AJAX, ASP, Pascal entre outros porém dificilmente você verá um site que não utilize HTML, e o mais comum é encontrar sites que utilizam somente HTML. Vale apena ressaltar que o HTML é uma línguagem ESTÁTICA, ou seja não há fluxos de informações dinâmica, Já as línguagens como: PHP, ASP, AJAX, ACTION SCRIPT( linguagem do FLASH, extensão .FLA) e JAVA são utilizadas para fins dinâmicos. Objetivos específico: O objetivo desta página é ensinar os princípios básicos para confecção de um site ou blog em HTML para que você possa fazer seu primeiro site ou seu blog. Aqui você aprenderá códigos HTML e saberá como inserir um vídeo, como inserir uma música, como inserir um flash, Inserir imagens, Criar Links com imagens, Como fazer tabelas, Criar Links para e-mail, Criar Âncora, Caixa de Texto, Meta-Tags, Letreiros e Linhas, Imagens de Fundo, Fazer Listas, Links para Downloads, Formatar Textos, Tamanho e Cores de Fonte, Cabeçalhos, Atributos de Body, enfim, será sua iniciação para fazer um site em HTML. Antes de Começar que conceitos básico devo ter? O que é WWW? Resposta clique aqui

O que é hipertexto? Respota clique aqui

O que é URL? Resposta clique aqui

O que é Domínio e Hospedagem? Resposta clique aqui

Leia Antes de Começar o Curso - Glossário da WEB -A– Administrador de Rede - Toda rede de computadores tem uma pessoa responsável por toda a estrutura e funcionamento: o administrador da rede. Esse administrador é quem vai definir a que recursos da rede cada pessoa terá acesso. Alias - É um apelido que você pode utilizar no lugar de um e-mail de uma pessoa ou grupo. Por exemplo, ao invés de organizar uma lista de endereços eletrônicos com e-mail de cada um, você fornece um nome mais simples que identifique cada pessoa. Artigo (article) - Qualquer mensagem enviada para os grupos de discussão (newsgroups). Archie - Ferramenta de procura de arquivos. Para consultá-los, usa-se o Telnet ou envia-se comandos por e-mail. O Archie devolve uma lista com os arquivos encontrados através de palavras-chave ou através de alguma descrição. Existem vários servidores Archie espalhados pela rede. Ao usá-lo, localize o maispróximo de você. ASCII - Significa "American Standart Code" for Information Interchange, código utilizado para representar textos quando há computadores envolvidos. Attachment - Você pode anexar qualquer tipo de arquivo ao seu mail utilizando a opção "Attachment", do seu software de correio eletrônico. -B– Backbone - É a espinha dorsal da Internet, onde são encontradas as maiores velocidades de transmissão. Banco de dados (database) - Em termos de Internet, computador que contém um número muito grande de informações, que podem ser acessados pela rede. Banda Passante (Bandwidth) - É tipicamente usada para especificar a quantidade de dados que podem ser enviados em um canal de comunicação. Baixar (Download)- Processo de transferência de arquivos de um computador remoto para o seu através de modem e programa específico. BBS (Bulletin Board System) - Serviço eletrônico que oferece recursos como correio eletrônico, acesso a outros computadores e serviços remotos, meios de oferecer e receber arquivos. O acesso ao BBS tanto pode ser feito pela Internet como por discagem direta. BITNET - Iniciais da expressão "Because It's Time Network" (Porque é tempo de rede) esse é o nome de uma rede acadêmica e de pesquisa iniciada em 1981 e operada pela Educom. Bits - É a menor unidade de medida de armazenamento do computador. Apresenta dois estados: 0 e 1. Bits por segundo (BPS) - É o número de bits transmitidos a cada segundo. É utilizado como uma unidade de medida que indica a velocidade de transferência de informações em uma rede. Byte - Cadeia de oito bits. -CCC (Courtesy Copy) - Quando você envia um e-mail, existe a possibilidade de enviar uma cópia para uma outra pessoa que também se interesse pelo assunto, utilizando a opção "cc" que se encontra no cabeçalho de todos os clientes de correio eletrônico. Você também pode utilizar esse campo se desejar guardar um email que tenha enviado para alguém. Basta colocar no campo "cc" o seu próprio endereço. Cliente - Um programa que roda no seu computador, o Netscape Navigator e o Eudora são alguns exemplos de clientes. Geralmente trabalha em dupla com o servidor.CCorreio eletrônico (e-mail) Mensagens privadas entregues através de contas individuais. Este endereço indica o "lugar" onde você tem uma caixa postal. Através do e-mail é possível solicitar arquivos, informações, fazer pesquisas e enviar

comandos para operar computadores remotos que realizam tarefas para o usuário.CCracker - É um indivíduo que tenta acessar sistemas de computadores sem autorização. Geralmente é malicioso, e ao contrário do "Hacker" (veja Hacker) ele tem sempre uma segunda intenção quando quebra o sistema. Cyberspace - Quem já entrou na Internet já teve a sensação de estar em um universo paralelo de idéias e informações, tamanho o número de possibilidades lá existentes. O cyberspace (espaço cibernético) foi o nome dado a este mundo virtual, e a Internet é a sua porta de entrada. -DDiretório (directory) - Arquivos em alguns sistemas de computadores que ficam agrupados juntos. Arquivos comuns para um mesmo tópico geralmente ficam organizados em diretórios e subdiretórios separados. Dialer - Programa que conecta o seu computador a outro. Exemplo: Linkway Dialer (Netscape) e Dialer do Windows 95. DNS - Método usado para converter nomes da Internet em números correspondentes. O DNS faz com que você utilize a Internet sem ter que decorar longos números. Domínio (Domain) - Trata-se de uma classificação para identificar os computadores na rede. Consiste numa seqüência de nomes ou palavras separadas por pontos. É nada mais nada menos que um sistema de endereçamento da Internet que envolve um grupo de nomes que são listados com pontos (.) entre eles, na ordem do mais específico para o mais geral. Nos Estados Unidos, existem domínios superiores divididos por áreas, como: .edu (educação), .com (comercial) e .gov (governo). Em outros países ocorre uma abreviatura de duas letras para cada país, como: br (Brasil) e fr (França). Download - Quando você transfere um arquivo de algum lugar para o seu computador, você está fazendo um download. -EEmoticons - Combinação de letras símbolos que significam reações. E-zine - São revistas on-line disponíveis na Internet. O nome vem "Eletrônic Magazine". Endereço - Todo e qualquer recurso na Internet possui um endereço. O endereço de uma pessoa pode ser o de seu e-mail ou mesmo da sua página Web, já o endereço de uma máquina está sempre relacionado ao endereço IP (veja IP address). -FFAQ (Frequently Asked Questions) - São arquivos contendo as "Perguntas mais freqüentes" sobre um determinado assunto. Eles ajudam na elucidação de dúvidas e na iniciação dos novatos, e são encontrados na Internet. Finger - Sistema pelo qual é possível descobrir o nome, qual a última vez que o usuário recebeu mensagem além de vários outros itens, tudo isso através do endereço eletrônico do usuário. Firewall - Sistema de segurança colocado nos sites da Internet, para prevenir acessos não autorizados ao sistema. Flame (em chamas) - Usado para a postagem de mensagens provocativas ou polêmicas, podendo causar conseqüências negativas. O usuário que envia essas mensagens é conhecido por flamer. Freenet (rede livre) - Organização que provê acesso livre à Internet para pessoas de uma determinada área, geralmente através de bibliotecas públicas. Freeware - Software disponível sem qualquer custo. FTP (File Transfer Protocol) - Sistema de transferência de cópias de arquivos de um computador para outro na Internet. FTP anônimo - É o uso do protocolo FTP em localidades conectadas à Internet que oferecem acesso público aos seus arquivos, sem a necessidade de identificação ou senha.

-GGateway - Um dispositivo que conecta redes que normalmente não se comunicam, permitindo a transferência de informação de uma para outra. GIF (Graphics Interchange Format) - Tipo de arquivo de armazenamento de imagens, desenvolvido pela Compu Serve e amplamente difundido na Internet. Esses arquivos são identificados pela extensão .gif. Gopher - Meio de navegação através de menus. Ferramenta muito usada com a função de localizar e recuperar arquivos na Internet. O nome "gropher" é proveniente do mascote da Universidade de Minnesota, local onde o projeto foi desenvolvido, Pai do Web. GUI (Interface Gráfica ao Usuário) - Interface que une ícones e funções para realizar tarefas e facilitar a vida do usuário. Gzip - Tipo de compressão de arquivos, funciona como o usual zip. -HHacker - É uma pessoa que tem prazer em conhecer profundamente o funcionamento interno dos sistemas, computadores e redes de computadores. A quebra de segurança de computadores é para Hacker apenas um desafio. Este termo geralmente é empregado de maneira pejorativa, onde o correto seria "Craker". Header (cabeçalho) - A parte de um pacote que precede os dados e que contém a fonte, o destino e o endereço, cabeçalho também é a parte de uma mensagem eletrônica que traz, entre outras coisas, o remetente, dia e hora. Hipertexto - Um tipo de texto que permite o uso de ligações (links) para outros documentos ou para partes do mesmo documento. Host - Um computador que está ligado à uma rede ou à Internet. Quando você se conecta a ele, passa a ter acesso a arquivos e informações. HTML - Hypertext Makup Language Linguagem padrão baseada em texto utilizada para escrever todos os documentos de hypertexto do World Wide Web. HTTP - Hyper Text Tranfer Protocol Protocolo de comunicação utilizado no World Wide Web. Hytelnet - Banco de dados sempre atualizado, que fornece informações sobre localidades Telnet específicas e ajuda a conectá-las. -IInfobahm - O mesmo que super-rodovia de informações ou super infohighway. Internauta - Nome dado ao usuário da Internet. Internet Protocol (IP) - Protocolo de comunicação que forma a base da Internet. InterNIC - Significa "Internet Information Center". Produz dados estatísticos da Rede e também é o responsável pelo registro de um novo domínio na Internet. IP Address (Internet Protocol Address) - É a identificação numérica dos computadores definida pelo protocolo IP. Toda máquina que faz parte da Internet possui um único e exclusivo endereço IP. IRC (Internet Relay Chat) - Sistema interativo no qual os usuários da Internet podem conversar (através do teclado) em tempo real. Depois do e-mail é o serviço mais popular da Internet. Existem várias opções de canais, proporcionando maior privacidade. ISDN (Integrated Services Digital Networks) - Uma tecnologia que combina voz e serviços de redes digitais em uma mesma linha. Possibilita conexões de alta velocidade à Internet. ISOC (Internet Society) - Uma organização que estuda e estimula a evolução da Internet. O ISOC também ajuda a promover o desenvolvimento de novas aplicações, publicando notas e artigos.

-J– Java - Considerada por muitos como a grande revolução do WWW, Java é uma linguagem de programação orientada a objetos, que permite o uso de interatividade nas páginas de Web. -KK - Significa "sobre 1.000", derivado do Grego kilo. Por exemplo, 8.6K significa, aproximadamente, 8.600 caracteres. -LLAN (Local Area Network) - É uma rede local de computadores, que permite que os usuários troquem informações e compartilhem recursos como impressoras ou MODEMS. A grande maioria das empresas atualmente possui um LAN que também está conectada à Internet. Listas de discussões, Grupos de discussões - As discussões são carregadas nas mensagens de correio eletrônico para respostas automáticas, queenviam uma cópia de cada mensagem enviada pelo correio eletrônico para qualquer um que tenha assinado a lista para discussões particulares de grupo. Linha dedicada - Linha telefônica Digital de Alta Velocidade que fica permanentemente ligada entre dois lugares. Linhas dedicadas são encontradas freqüentemente em conexões de tamanho moderado a um provedor de acesso. Listserv - Programa que fornece o processamento automático de muitas funções envolvidas com as listas de correspondência (grupos de discussões). O envio, através do correio eletrônico, de mensagens apropriadas para esse programa automaticamente o inscreve (ou cancela a inscrição) como usuário de uma lista de discussão. O listserv também responde solicitações de índices. FAQs, arquivos das discussões anteriores e outros arquivos. LOGOFF - É o processo de desconexão de um sistema on-line. LOGIN - É um processo para sua identificação em um sistema. Toda vez que você se conecta a algum site este processo se realiza, sendo geralmente composto de duas etapas. Primeiro você fornece o nome através do qual você é conhecido na rede (username), e depois informa a sua senha (password). Lurkers - É como são chamados os participantes não-ativos de grupos como Usenet Newsgroup, Mailing List e IRC; quer dizer, somente "ouvem", não participam ativamente das discussões . No CU-SeeMe os "lukers" são os participantes que não possuem câmeras. -MMailbox - É a área que armazena as mensagens eletrônicas recebidas. Mailing list MIME (Multipurpose Internet Mail Extensions) - É um aperfeiçoamento dos padrões do sistema de correio da Internet, que possui a habilidade de transferir dados não textuais como gráficos, áudio e fax e permite que se envie mensagens com a acentuação em português. Mirror Site - Sites que são réplicas de outros muitos populares. O uso de "Mirror Sites" é incentivado, pois distribui melhor o tráfego na Rede. Geralmente, a escolha de um site perto de você é garantia de melhores taxas de transferência, sendo assim, procure saber se aquele super site que você sempre visita não possui um espelho no Brasil. Modem - Um dispositivo que transforma sinais analógicos em digitais viceversa.O nome MODEM, na verdade é uma sigla para MOdulador DEModulador. Mosaic - Interface gráfica que atua como um software-cliente para o FTP, gopher, Usenet News, WAIS e WWW. "Pai" do Netscape. -NNet - Abreviação para Internet Netiquette (Netiqueta) - Uma combinação das palavras "Net"e "etiquette". São padrões de bom comportamento utilizados na Internet. O conceito básico da "Netiquette" é que existem pessoas reais do outro lado da máquina, sendo assim, comentários ou atitudes desagradáveis são tão ofensivos quanto se estas estivessem na sua frente.

Netscape Navigator Personal Edition - é um conjunto de softwares gráfico que conecta você a um provedor de acesso a rede Internet e lhe garante fácil acesso a Internet e ao Word Wide Web. Newbie - O mesmo que novato na Internet. Newsgroup Usenet (Netnews) - São grupos de discussões que usam software newsreader e servidores. NNTP (Network News Tranfer Protocol) - Padrão usado para a troca de mensagens dos usuários da Usenet na Internet. Nó (Node) - Um computador que está conectado a uma rede. -OOn-line - Termo que significa estar no sistema, estar conectado a algum lugar. Daí surgem as revistas e bancos on- line. -P– Pacote (Packet) - Unidade padrão para representar os dados enviados pela rede. Uma informação é sempre dividida em pequenos pacotes. Paginadores - Aplicações clientes que permitem a visualização de páginas WWW. Par trançado - Cabo produzido por pares de fios de cobre trançados uns aos outros fazendo com que se cancelem os efeitos de ruídos elétricos. Password - É a senha utilizada para identificação de um usuário em um sistema. É ela que valida ou não o seu pedido de conexão. Port (1) - Número que identifica uma aplicação particular na Internet. Quando o seu computador manda um "pacote" para outro computador, este "pacote" contém informação sobre o protocolo que está sendo usado, e que aplicação está se comunicando com ele. Port (2) - Computador com canais de entrada e saída. Posting - Um artigo individual mandado para o grupo de discussão da Usenet ou o ato de mandar um artigo para o Usenet. Postmaster - Pessoa responsável por cuidar e solucionar os problemas ligados ao e-mail. POP (Post Office Protocol) - permite que o usuário leia as suas mensagens a partir do servidor de mails localizado no seu provedor . O POP é utilizado para transmitir todos os mails armazenados no servidor para a máquina cliente, no caso, a sua máquina. PPP - Conhecido como Point-to-Point Protocol, é um protocolo de transmissão de pacotes, muito utilizado por quem se conecta à Internet através de MODEM. Protocolo - É um conjunto de regras estabelecidas com o objetivo de permitir a comunicação entre computadores. Provedor de Acesso - Organização que oferece conexão para Internet. -R– Rede - Um grupo de equipamentos conectados de forma a transmitir informações entre eles e compartilhar recursos. Quando esta palavra iniciar com maiúscula (Rede) estaremos nos referindo à Internet. RFC (Request For Comments) - Um conjunto de documentos utilizados na discussão de padrões e experimentos realizados na Internet.

Root - Super - Usuário - É uma pessoa que tem poderes "ilimitados" dentro da rede. De forma geral,

somente o administrador se encaixa nesta categoria. Rota (Rout) - Caminho na rede feito desde a origem até seu destino. Roteador - Dispositivo dedicado ao envio e direcionamento de pacotes (pedaços de mensagens) entre os nós da rede. Realidade Virtual - É qualquer uma das várias combinações de recursos de interface de usuário que permite a este interagir com o computador ou sistema, de uma maneira que tenta imitar da forma mais perfeita possível o ser humano. Pode incluir vários tipos de recursos. -SServidor - Um programa que recebe solicitações de um cliente. Geralmente os servidores rodam nos hosts. Shareware - Software que geralmente está disponível como "experimente antes de comprar". Site - É um termo largamente utilizado para fazer referência a um nó da Internet.SSlip - Conhecido como "Serial Line Internet Protocol", é um protocolo de transmissão de pacotes similar ao PPP, muito utilizado por quem se conecta à Internet através de MODEM. SMTP (Simple Mail Transfer Protocol) - É o protocolo utilizado para a transferência de mensagens eletrônicas de servidor para servidor. -TT1, T3 - Padrões que representam 1.544 megabits (T1) e 45 megabits (T3) por segundo na transmissão de dados. TCP/IP - Conjunto de protocolos utilizados na troca de informações entre computadores de diferentes arquiteturas dentro da Internet. O TCP/IP está disponível para qualquer tipo de CPU e sistema operacional. Talk - Programa utilizado para conversar com outro usuário da Internet (para quem tem um número IP fixo), não importa a onde esteja. Telnet - Padrão de protocolo na Internet que provê conexão com computador remoto. O Telnet permite que o usuário em um mesmo site possa interagir com um sistema remoto em outro site como se o terminal do usuário estivesse diretamente conectado ao computador remoto. Terminal do servidor (Terminal server) - Pequeno e especializado computador de rede que conecta vários terminais na LAN através de uma conexão de rede. Qualquer usuário na rede pode conectar-se a vários hosts de rede. -UUnix - Sistema operacional no qual a Internet se desenvolveu. A maioria dos servidores na Internet utilizam esse sistema. Upload - Quando você transfere um arquivo do seu computador para algum lugar, você esta fazendo um upload. URL (Uniform Resource Locator) - Um método para especificar a exata localização de um recurso na Internet. Por exemplo, o URL http://www.wenet.com.br/index.html indica que o arquivo chamado index.html reside no host chamado www.wenet.com.br. USENET - Rede de base Unix que suporta a distribuição das mensagens. Username (nome do usuário) ou ID - Endereço que representa uma conta pessoal num grande (nome@provedor.com.br).

-VVRML (Virtual Rality Modelling Language) - é uma linguagem de programação que permite a utilização de animações tridimensionais no WWW. -WWAIS (Wide Área Information Service) - é um serviço de busca, que a partir de uma palavra localiza em uma grande base de dados a informação desejada. A maioria dos localizadores na WWW utilizam o WAIS. Web browser - Veja em Paginadores. Winsocks (Windows Sockets) - são um conjunto de especificações e padrões para que aplicações TCP/IP possam utilizar o Windows como sistema operacional. WWW - World Wide Web.

INTERNET INTRODUÇÃO Mais que um modismo a Internet tornou-se um fenômeno. Conectando mais de um milhão de computadores e cerca de 40 milhões de usuários, espalhados em noventa países, valores estes que mudam a cada dia, sem dúvida não dar para ficar de fora desta teia. Enfim, se formos descrever Internet, a melhor é definirmos como Comunicação. Com ela encontramos serviços e facilidades, notícias e atualidades, ou se preferir como é o caso de muitas pessoas, um excelente local para encontrar amigos, jogos, bate papo e muito mais, como lojas virtuais, onde você pode comprar ou vender com toda segurança.

HISTÓRICO A Internet deve início em 1969 sob o nome de ARPANET (USA). Composta de quatro computadores tinha coo finalidade, demonstrar as potencialidades na construção de redes usando computadores dispersos (espalhados) em uma grande área. A idéia foi boa, e em 1972, 50 universidades e instituições militares já possuíam conexões. Hoje é uma arquitetura de software e hardware que se comunicam entre si que são mantidas por organizações comerciais e governamentais. Mas uma das principais características da Internet, é que não possui dono, para organizar toda essa troca de informações, existem associações e grupos que se dedicam para suportar, ratificar padrões e resolver questões operacionais, visando promover os objetivos da Internet. A WORD WIDE WEB As pessoas costuma falar em Internet e Web, será a mesma coisa? Será apenas uma gíria da moçada do bate papo? Ou existe realmente um conceito científico para isto? Para resolver esta dúvida e também para começarmos a entender esta série de definição de conceitos, vamos partir do seguinte princípio: A Word Wide Web (teia mundial) é conhecida como WWW, uma nova estrutura de navegação pelos diversos itens de dados em vários computadores diferentes. O modelo WWW é tratar todos os dados da Internet como hipertexto, isto é, vinculações entre as diferentes partes do documento para permitir que as informações sejam exploradas interativamente e não apenas de uma forma linear. Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador (Browser), você verá páginas na WEB bem dinâmicas, organizadas, animadas e com ela trazendo informações, imagens, sons, vídeos e etc. Então, você deve se perguntar. Como é feito? Como elas se propagam? Todas estas páginas possuem um código fonte escrito numa linguagem chamada HTML (Hyper Text Markup Language). Este tutorial tem por objetivo mostrá-lo como criar e exibir páginas HTML, como as que você ver através da WEB. Tais páginas são criadas a partir de arquivos texto ASCII, contendo caracteres de marcação da linguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão .html.

Então, entendido novamente mais uma etapa, vamos iniciar o curso de verdade. A cada exemplo você deverá salvar seu arquivo com a extensão html. Certo ?

Aula 1 – TAGS Abrindo o editor Gedit. Vá no botão iniciar do sistema operacional em acessórios/Editor de Texto Gedit

2. Edite os seguintes comando básicos: <html> <head> <title></title> <head> <body> </body> </html> 3. Salve numa pasta na área de trabalho de seu computador com a extensão "index.html". 3.1.Insira o nome da pasta de site; 3.2. Dentro da pasta crie as seguintes subpastas; img-> será o subdiretório dos arquivos de imagens do site; movie-> será subsiretório dos aquivos de videos do site; media-> será o subdiretório dos arquivos de áudio. 4. Comentários das TAGS acima. Dentro de um documento HTML temos elementos de marcação denominados TAGS . Uma TAG é definida através de seu nome cercado pelos sinais de “menor” (<) e “maior” (>) e normalmente tem uma TAG correspondente para finalização, com o mesmo nome e precedido por uma barra (/). <COMANDO></COMANDO> EX:. PÁGINA BÁSICA EM HTML <HTML> <HEAD> <TITLE>MEU TÍTULO DO SITE</TITLE> </HEAD> <BODY> CORPO DA PÁGINA </BODY> </HTML> explicação: <html></html> define a extensão da programação HTML, poderia ser em outras linguagens como: Exemplo de linguagem em PHP <html> <head> <title>PHP Teste</title> </head>

<body> <?php echo "<p>Olá Mundo</p>"; ?> </body> </html> Exemplo de linguagem em ASP <% TimeStamp.Text=now() %> <html> <body bgcolor="aqua"> <center> <h2> Olá ! Esta é uma página ASP.NET. </h2> <asp:label id="TimeStamp" runat="server" /> </center> </body> </html>

Ex.: <HEAD> .... corpo do documento ... </HEAD> (define o início e o fim do corpo do documento HTMLque suporta Códigos JAVASCRIT ), não podemos inserir códigos JavaScrit em outros o lugar ideal é entre as tags ou etiquetas HEAD.Não esqueça que também entre essa tag se inseri a TAG <TITLE></TITLE> que imprime no html o Título. Ex.: <BODY> .... corpo do documento ... </BODY> (define o início e o fim do corpo do documento HTML).nesta TAG se inseri todo conteúdo da páginas: Textos, vídeos, áudios entre outros. Algumas TAGS admitem de atributos (parâmetros) que alteram a maneira como o navegador deve interpretá-la e normalmente são colocados na TAG inicializadora. O exemplo abaixo defini um site com um fundo de imagem predefinida pelo o usuário. Ex.: <BODY BACKGROUND=”fundo.gif”> .... corpo do documento </BODY> (define que o documento HTML terá como fundo a figura fundo.gif ) Também a TAG pode ser chamada de ETIQUETA 5. TAGS Básicas:

<html> Marca o início e o fim do documento HTML. Com ele você inicia e finaliza a construção da página Web. <head> Marca o início e do fim do cabeçalho, ou seja, a área onde serão descritos cabeçalhos e o título da página e pode ser inserido o código JavaScrit. Também indicam o cabeçalho do documento e nelas estão contidas as informações de configuração da página. Entre as tags <HEAD> e </HEAD> temos as seguintes opções : Tag <TITLE> Tag <ISINDEX> Tag <META> Tag <NEXTID> Tag <JAVASCRIT> Tag <META HTTP-EQUIV> <title> Marca o início e o fim do título do cabeçalho. O título da página aparecerá na barra superior do browser.

Abaixo temos um exemplo que ilustra a utilização das tags vistas até agora : <HTML> <HEAD> <TITLE>Meu primeiro documento HTML</TITLE> </HEAD> </HTML>

Atividade 1 Digite o utilizando o gedit e salve-o com o nome de exercicio1.html . Abra o seu navegador e utilize-o para verificar o resultado do exercício. Quando estiver OK, faça as seguintes alterações, testando uma a uma : Mude o título do seu documento para "minha página da educação". salve e veja o resultado se foi alterado. <body> Tags <BODY> ... </BODY> Todo o conteúdo do documento HTML deve estar entre as tags <BODY> e </BODY> . Na versão 3.0 do HTML a tag <BODY> passou a admitir os atributos BGCOLOR, TEXT, LINK, ALINK e VLINK, que definem as cores de preenchimento da página, texto, links não visitados, link ativos e links visitados respectivamente e BACKGROUND, que define uma imagem de fundo para a página. Se não forem especificadas nem BGCOLOR e nem BACKGROUND, a cor de fundo da página será a padrão do navegador. As imagens mostradas pelos navegadores normalmente devem estar nos formatos GIF (.gif) e JPEG (.jpg) . Outros formatos não são aceitos por todos os navegadores. As cores devem ser especificadas no formato RGB (Red, Green, Blue) e em hexadecimal . Na forma geral “#RRGGBB”. Veja alguns exemplos de cores hexadecimal: #FF0000 (Vermelho) #FF00FF (Magenta) #A8A8A8 (Cinza claro) #4F2F4F (Violeta) #000000 (Preto) #0000FF (Azul) #FFFF00 (Amarelo) #BC8F8F (Pink) #FFFFFF (Branco) #00FF00 (Verde) #00FFFF (Cian) #C0C0C0 (Cinza) Veja o exemplo abaixo: <HTML> <HEAD> <TITLE>Esse documento tem o fundo amarelo !! </TITLE> </HEAD> <BODY BGCOLOR=”#FFFF00”> </BODY> </HTML>

Atividade 2 Digite o Exemplo acima utilizando o Gedit e salve-o com o nome de exercicio2.html . Abra o seu navegador e utilize-o para verificar o resultado do exercício. Quando estiver OK, faça as seguintes alterações, testando uma a uma : Mude a cor de fundo Teste outras combinações no formato RGB Encontre um arquivo dos tipos GIF ou JPEG e coloque como fundo do seu documento.

Tag <BR> Faz uma quebra de linha no texto. O texto em um documento HTML não faz quebras de linha automáticas. Seria uma espécie de "enter" do html. Essas devem ser inseridas utilizando-se tags <BR>.

Atividade 3 Digite o documento abaixo utilizando o Gedit e salve-o com o nome de exercicio3.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Insira tags <BR> nesse documento para que seja melhor visualizado. <HTML> <HEAD> <TITLE> Exemplo que mostra quebras de linhas </TITLE> </HEAD> <BODY> O HTML precisa de tags especiais de quebra de linha . Os ENTER’s colocados no texto não geram quebras de linhas . </BODY> </HTML> Tags <P> ... </P> Essas tags criam parágrafos no texto do corpo do documento, gerando uma quebra de linha maior que a da tag <BR>. Admitem também atributo de alinhamento ALIGN=”left” (à esquerda), ALIGN=”right” (à direita) e ALIGN=”center” (ao centro). Tags <B> ... </B> Coloca em negrito o texto envolvido. Tags <I> ... </I> Coloca em itálico o texto envolvido. Tags <U> ... </U> Sublinha o texto envolvido. Tags <SUB> ... </SUB> e <SUP> ... </SUP> O texto envolvido fica Subscrito e Sobrescrito , respectivamente.

Atividade 4 Altere o exercício anterior trocando as tags <BR> por <P> e observe a diferença. Aumente o texto e deixe algumas linhas com <BR> para facilitar a visualização. Utilize variações de alinhamento nos parágrafos.Coloque algumas tags de formatação de fontes para criar textos enfatizados (negrito, itálico, sublinhado, subscrito e sobrescrito) Tags <Hn> ... </Hn> Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6), que podem ser de seis formas com tamanhos, identação e posicionamento diferentes. Juntamente podemos utilizar as opções de alinhamento ALIGN=”left” (à esquerda), ALIGN=”right” (à direita) e ALIGN=”center” (ao centro).

Atividade 5 Digite o documento abaixo utilizando o Gedit e salve-o com o nome de exercicio5.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Faça alterações, mudando o alinhamento dos cabeçalhos à esquerda, à direita e ao centro. <HTML> <HEAD> <TITLE> Exemplo que mostra os cabecalhos da seções. </TITLE> </HEAD> <BODY> <H1> Cabeçalho principal </H1> Este texto está sobre a seção principal <H2> Cabeçalho nível 2 </H2> <H3> Cabeçalho nível 3 </H2> <H4> Cabeçalho nível 4 </H2> <H5> Cabeçalho nível 5 </H2> <H6> Cabeçalho nível 6 </H2> Este texto está sobre a seção cabeçalho nível 6 </BODY> </HTML> Utilize o Gedit para criar um documento em HTML, que dê um resultado semelhante ao que temos a seguir, note que será necessário misturar o uso de diversas tags. Faça alterações no atributo TEXT da tag <BODY> para variar a cor do texto. Texto Modelo NTE Ananin - Núcleo de Tecnologia Educacional de Ananindeua Curso de HTML No curso de Tecnologia aplicada à Educação do NTE Ananin, os alunos desenvolvem a linguagem HTML*, HyperText Markup Language HTML é a linguagem utilizada nas páginas da Internet -----------------------------------------------------------------------------Tags <FONT> ... </FONT> As tags <FONT>...</FONT> fazem a formatação de fonte no texto que envolvem no documento HTML. Juntamente a essas tags utilizam-se os atributos SIZE, FACE e COLOR para definir tamanho, tipo do fonte e cor, respectivamente. Os tamanhos de fontes podem variar entre 1 e 7 apenas(No HTML versão 4 não existe limite para o tamanho da fonte). Cuidado com a utilização excessiva de fontes, não é garantido que exista a fonte especificada no computador que está acessando a sua página na Internet. Se forem colocados vários tipos de fontes separados por vírgulas, o navegador utilizará a primeira fonte da lista que estiver disponível na máquina.

Atividade 6 Digite o documento abaixo utilizando o Gedit e salve-o com o nome de exercicio6.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Faça alterações nos atributos e coloque quebras de linhas onde for necessário. modelo: <HTML> <HEAD> <TITLE> Exemplo que mostra os possíveis variações com fontes. </TITLE> </HEAD> <BODY> <FONT SIZE=”1” FACE=”arial” COLOR=”#FF0000”> Arial, tam. 1 </FONT> <FONT SIZE=”3” FACE=”helvetica” COLOR=”#00FF00”> Helvetica, tam. 3 </FONT> <FONT SIZE=”5” FACE=”times” COLOR=”#0000FF”> Fonte de tamanho 5 </FONT> <FONT SIZE=”7” COLOR=”#FF00FF”> Times é o padrão</FONT> </BODY> </HTML>

Tag <BASEFONT> Tem a finalidade de definir um padrão para a fonte que será utilizada no documento todo. Ainda assim é possível utilizar as tags <FONT> ...</FONT> para alterar esse padrão. Digite o documento abaixo utilizando o Gedit e salve-o com o nome de exercicio62.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Faça alterações nos atributos e coloque quebras de linhas onde for necessário. Modelo: <HTML> <HEAD> <TITLE> Exemplo que mostra os possíveis variações com fontes. </TITLE> </HEAD> <BASEFONT SIZE=”4” COLOR=”#00FFFF” FACE=”arial, helvetica, times”> Todo esse texto deve estar em fonte Arial de tamanho 4 e cor azul claro. Se na máquina não tiver o fonte Arial, será utilizado o Helvetica e em último caso, Times. </BODY> </HTML>

Tag <HR> Desenha uma linha horizontal no documento. Pode ser modificada pelos seguinte atributos : SIZE : Define a espessura, em pixels, da linha. WIDTH : Define a largura da linha, o que pode ser feito em pixels (número absoluto) ou em percentual da tela (com o símbolo de %) ALIGN : Alinhamento, como o que tem sido usado, pode ser LEFT , RIGHT e CENTER ou seja, esquerda, direita e ao centro, respectivamente. NOSHADE : Linha sem sombra. O padrão é a linha sombreada, utilizando esse atributo temos uma linha sem sombra.

Atividade 7 Digite o documento abaixo utilizando o Gedit e salve-o com o nome de exercicio7.html. Faça alterações nos atributos para desenvolver mais sobre essa tag, experimente combinar os atributos. Modelo: <HTML> <HEAD> <TITLE> Exemplo que mostra a utilização de linhas horizontais </TITLE> </HEAD> <BODY> Linha comum<BR> <HR> Linha com a espessura modificada <HR SIZE=”5”> Linha com largura especificada em percentual <HR WIDTH=”50%”> Linha com largura absoluta e sem sombra <HR WIDTH=”400” NOSHADE> </BODY> </HTML> OBS: A tag <HR> não precisa de fechamento</HR>.

Tags <A>...</A> Faz a âncora entre documentos ou partes de um mesmo documento. Deve sempre ser utilizada acompanhada de um atributo que fará a especificação do tipo de âncora que se deseja. O texto que está incluído entre as tags <A> e </A> será apresentado como link no documento (sublinhado e em cor destacada). Abaixo alguns dos atributos mais comuns que podem ser utilizados com a tag <A> : HREF: Marca a âncora como um link para outro documento, recurso ou parte do mesmo documento. NAME: Marca a âncora para um possível local do documento com um nome para que possa ser referido como alvo de um link . O nome especificado deve ser único no documento (não podem haver duas âncoras com o mesmo nome no mesmo documento). Existem ainda os atributos REL, VER, URN, TITLE e TARGET, menos utilizados atualmente na programação HTML.

Atividade 8 Digite o documento abaixo utilizando o Gedit e salve-o com o nome de exercicio8.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Modelo: <HTML> <HEAD> <TITLE> Link para o exercício 7. </TITLE> </HEAD> <BODY> <H1> Será que é possível ligar dois documentos ?? </H1> <A HREF="exercicio7.html"> Clique aqui para ir ao exercício 7 </A> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <A NAME="Final">Essa parte está no final do documento.</A> </BODY> </HTML>

Coloque textos curtos e significativos para seus links. Na tag <BODY> é possível especificar a cor dos links não visitados, links visitados e link ativo, utilizando os atributos LINK, VLINK e ALINK, respectivamente. Quando referindo páginas que estão fora do diretório onde seu documento está armazenado não se esqueça de colocar o caminho completo para o link, por exemplo, http://www.seduc.pa.gov.br para fazer um link para o site da SEDUC-PA. Evite usar sublinhado em palavras que não são links, pois isto confunde os visitantes de sua página!

Atividade 8.2 Digite o documento abaixo utilizando o gedit e salve-o com o nome de exercicio82.html. Abra o seu navegador e utilize-o para verificar o resultado do exercício. <HTML> <HEAD> <TITLE> Link para o exercício 8. </TITLE> </HEAD> <BODY> <H1> Vamos ligar esse documento à parte inferior do exercício 8.1 </H1> <A HREF="exercicio8.html#Final"> Clique aqui para ir ao final do exercício 8 </A> <BR> <A HREF="#Final"> Clique aqui para ir ao final desse exercício </A> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <A NAME="Final">Final desse documento.</A> </BODY> </HTML>

Exercício proposto: Crie um documento HTML que faça um espécie de menu com os exercícios feitos até agora, utilizando um link para cada um deles. Verique o que você aprendeu, utilize a variação de cores, fontes e efeitos em fontes.

Tudo o que for escrito entre as tags <A> e </A> será considerado parte do link. pode ser incorporado uma imagem dentro desta TAG; Exemplo: <a href="URL" ><img src="URL da IMAGEM" width="tamanho horizontal" height="altura da imagem"></a>.

Tag <IMG> Insere uma imagem dentro de um documento HTML. As imagens, assim como em <BODY BACKGROUND >, devem estar nos formatos GIF ou JPEG. Os atributos normalmente utilizados são : SRC : Especifica o nome do arquivo de imagem. Sem esse atributo a tag <IMG> não tem finalidade. ALT : Texto alternativo para a imagem (muito útil quando o usuário não está exibindo as figuras. O texto auxilia no entendimento do significado daquela imagem). ALIGN : Alinhamento do texto em relação à imagem. HEIGHT : Altura da figura em pixels (se não utilizada, a figura será mostrada em sua altura original). WIDTH : Largura, semelhante a HEIGHT. Existem ainda os atributos HSPACE, VSPACE, BORDER, ISMAP, USEMAP e UNITS disponíveis para a tag <IMG>.

Atividade 9 Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exercicio9.html. Encontre algumas figuras em seu disco e substitu-a os nomes “figura” colocados nas tags <IMG> do documento. Abra o seu navegador e utilize-o para verificar o resultado do exercício. Faça experiências com a combinação de atributos e crie links utilizando as imagens para os exercícios anteriores.. Modelo: <HTML> <HEAD> <TITLE> Mostrando figuras no documento HTML. </TITLE> </HEAD> <BODY> <BR> <IMG SRC="figura1.gif"> Veja uma figura no documento... <BR><BR><BR> <IMG SRC="figura2.gif" ALIGN="top"> Essa figura tem o texto alinhado acima <BR><BR><BR> <IMG SRC="figura3.gif" ALT="Texto alternativo"> Passe o mouse sobre a figura

<BR><BR><BR> <IMG SRC="figura4.gif" HEIGHT="100"> Essa figura esta com a altura modificada </BODY> </HTML> É possível colocar imagens como links. Basta incluí-la entre as tags <A> e </A>.

HTML suporta cinco tipos de listas. UL - Listas não ordenadas OL - Listas ordenadas DL - Listas de definições (ou listas glossário) DIR - Listas diretório (obsoleta HTML 3.0) MENU - Listas diretório (obsoleta HTML 3.0) Tags <UL> ... </UL> Tags <LI> ... </LI> Tags <OL> ... </OL> Tags <LI> ... </LI> Uma LISTA ordenada é primeiro marcada com tag de início e fim <OL>, então cada item da lista é indicado com uma tag <LI>. Uma LISTA não ordenada é primeiro marcada com tag de início e fim <UL>, então cada item da lista é indicado com uma tag <LI>.

Exemplo de uma lista Código: ----------------------------------------<UL> <LI>Maçãs <LI>Laranjas </UL> --------------------------------------Resultado: Maçãs Laranjas ---------------------------------------É possível escolher o tipo dos bullets que serão apresentados através do atributo <UL TYPE=”X”> , onde X pode ser SQUARE, CIRCLE e DISC. Isso funciona apenas com o NETSCAPE. Os itens da lista tem tags de fim </LI> , mas elas são opcionais desde que uma nova tag implique no final da anterior. As listas podem estar aninhadas e nesse caso, são apresentadas internamente aos itens da lista anterior. Tags <OL> ... </OL> Tags <LI> ... </LI> Uma lista de itens em uma ordem particular. Estas são normalmente numeradas quando mostradas. Exemplo: ----------------------<OL> <LI>Apples <LI>Oranges </OL> --------------------Resultado:

1. Apples 2. Oranges ------------------------Junto com a tag <OL> podemos utilizar dois atributos : TYPE=”X” (que permite que se especifique o tipo de sistema de numeração A maiúsculas, a minúsculas, I numerais romanos grandes e i numerais romanos pequenos) e START=”X” (que permite especificar quaisquer valores para iniciar a lista). --------------------------Tags <DL> ... </DL> Tag <DT> Tag <DD> Uma lista definição <DL> é uma lista de termos <DT> e suas definições <DD>. Cada definição é usualmente mostrada identada em relação ao termo correspondente. Exemplo: ------------------------------<DL> <DT>HTML <DD>HyperText Markup Language <DT>SGML <DD>Standard Generalized Markup Language </DL> Resultado: HTML HyperText Markup Language SGML Standard Generalized Markup Language

Atividade 10 Utilizando as tags desse capítulo você deve criar a seguinte página. De acordo com suas preferências. Utilizando lista definição: As coisas que eu mais gosto de fazer : Sábado Pela manhã XXXXXXX YYYYYYYY À tarde XXXXXXX YYYYYYYY À noite XXXXXXX YYYYYYYY Domingo XXXXXXXXXXX YYYYYYYYYYYY Utilizando lista não ordenada: Minhas bebidas preferidas AAAAAAA BBBBBBB CCCCCCC Utilizando lista ordenada: Quando eu acordo de manhã, essa é a seqüência das coisas que faço :

AAAAAAAAA BBBBBBBBB CCCCCCCC ----------------------------------------------------------Tags <PRE> ... </PRE> Delimita um texto a ser exibido com fonte de largura fixa, da maneira como foi previamente formatado. Com a utilização desse elemento, todos os espaços e saltos de linha são considerados de acordo com o que é inserido no documento.

Atividade 11 Escreva um documento em HTML que apresente uma pequena tabela conforme mostrada abaixo : +----------------------------------------+ | Tabela de Preços | +--------------------------+-------------+ | Maça argentina R$ 10,00| | | Laranja Pera R$ 5,00 | | | Banana Nanica R$ 2,50 | | +--------------------------+-------------+

<HEAD> <META HTTP-EQUIV="IFUSP - Instituto de Física da USP" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="Mon, 01 Jan 1990 12:00:00 GMT"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> Neste exemplo <META> é usado para forçar o browser a não usar seu cache em disco local na hora de apresentar o conteúdo do documento ao cliente HTTP. Se esse procedimento tem a vantagem de obrigar o cliente a pegar a página no servidor Web, por outro lado acarreta fluxo desnecessário de pacotes TCP/IP. OBSERVAÇÃO: Os browsers atuais têm fama de serem rápidos, mas na verdade boa parte dessa "rapidez" tem origem na leitura da página em disco local (cache), uma vez que após acessada pela primeira vez essa página é salva no cache do browser. Com isso economiza-se o download da página pela Internet, mas traz também o inconveniente do browser se recusar a mostrar aquela atualização da página que acabou de ser feita. Exemplo: <HEAD> <META HTTP-EQUIV="Refresh" CONTENT="5; URL=exercicios.html"> </HEAD> Neste exemplo <META> é usado para efetuar um "refresh" (renovação) HTML, ou seja, 5 segundos após acessada a página que contém o META-REFRESH o cliente HTTP é forçado a receber a página "exercicios.html"(ela vai direcionar para esta página exerciocios.html). NOTA: Por ser muito simples e prático, o META-REFRESH é um método de redirecionamento muito usado na WWW.

TAG <EMBED ...> coloca um plugin para o navegador na página. Um plugin é um programa especial localizado no computador do cliente (ou seja, não no seu servidor web) que lida com seu próprio tipo especial de arquivo de dados. Os plugins mais comuns são de sons e filmes. O <EMBED ...> tag indica a localização de um arquivo de dados que o plugin deve lidar. Atibutos: SRC : URL do recurso a ser incorporado (multimidia como documentos, áudioe vídeos) WIDTH : largura da área em que para mostrar recurso. HEIGHT : altura da área em que para mostrar recurso. ALIGN : como o texto deve fluir ao redor da imagem(alilhamento). NAME : nome do objeto incorporado. PLUGINSPAGE : onde obter o software plugin PLUGINURL : onde obter o arquivo JAR para instalação automática HIDDEN : se o objeto é visível ou não HREF : faça este objeto um link TARGET : frame de vincular a AUTOSTART : se o som / filme deve iniciar automaticamente. LOOP : quantas vezes para reproduzir o som / filme. PLAYCOUNT : quantas vezes para reproduzir o som / filme. VOLUME : quão alto para reproduzir o som. CONTROLS : qual o som de controle para exibir. CONTROLLER : se os controles devem ser exibidos. MASTERSOUND : indica o objeto em um grupo som com o som para usar. STARTTIME :Determina o tempo para iniciar e parar ENDTIME : quando terminar de tocar. No seu uso mais simples, <EMBED ...> usa o SRC atributo para indicar a localização do arquivo de dados

plugin, e geralmente também dá uma WIDTH e HEIGHT da área plugin. Por exemplo, o código a seguir incorpora um arquivo MIDI na página: <EMBED SRC ="pasta/arquivo.mid" ALTURA = 60 LARGURA = 144> pode ser PDF muito importante para suas aulas!!!! <embed height="375" width="500" src="http://www.portalescolar.pa.gov.br/ambiente/file.php/233/manual_de_radio.pdf " /> Resultado:

<EMBED ...> não é uma parte do HTML 4 ou 1 xHTML especificações, mas ainda é amplamente suportado pelos navegadores modernos. Ao contrário de outras marcas, os atributos usados pelo <EMBED ...> dependem do tipo de plugin a ser utilizado (este conceito atributo livre de estranho é porque <EMBED ...> foi rejeitado pelos fabricantes HTML standards). O único atributo necessário para <EMBED ...> é SRC , por isso vamos começar lá. Saiba mais aqui sobre PDF

Formatos de som Há muitos formatos de computador para o som, e, teoricamente, qualquer um deles poderia ser usado em uma página web. Os três formatos mais populares (aqueles mais propensos a trabalhar em máquinas dos seus leitores) são WAVE, AU, e MIDI. WAVE (Wave formulário Formato de arquivo de áudio, com a extensão de arquivo. Wav) foi inventado para Windows da Microsoft. AU (Au dio Formato do arquivo, extensão de arquivo. Au) foi inventado por NeXT e dom. Ambos são agora amplamente aceito em muitas plataformas, e são comuns em páginas web. WAVE e AU são como gravações de som ... se reproduzem sons gravados (ou computador sons gerados). Eles também tendem a ser grandes arquivos de som para apenas um pouco. Arquivos WAVE e AU são bons para um efeito de som curtos, como uma breve saudação ou talvez um moo vaca . (Note que o tamanho do arquivo é moo 21,5 KK apenas cerca de um segundo de som.) Há também um formato de som gravado chamado AIFF (A udio nterchange eu F ile F ormat), inventado pela Apple e SGI, que é amplamente suportada, mas é muito menos popular do que da UA e WAVE. MIDI (M INSTRUMENTO I usical D igital Nterface I) é um conceito completamente diferente. O formato de arquivo MIDI é uma série de comandos como "play média C para 0,25 segundo". Este tipo de comandos são muito pequenas, então uma das grandes vantagens de arquivos MIDI para a sua página web é que um monte de música pode ser embalado em um pequeno arquivo MIDI. Esta versão de "Hazy Shade of Winter" é apenas 16K, mas joga há mais de dois minutos. A desvantagem do MIDI é que ele tem um verdadeiro mestre para trabalhar qualquer expressividade para este formato eletrônico baseada em comandos. Música MIDI tende a ter um desinteressante "easy listening" qualidade a ele, tornando a sua página web parecer um consultório de dentista.

Formato OGG Informações sobre o formato de áudio Ogg Vorbis (.ogg) Ogg vorbis foi criado pois o mp3 não é verdadeiramente livre: os membros do MPEG consortium alegam que você não pode criar um encoder mp3 sem infringir nas patentes deles. Ogg vorbis é um formato de áudio comprimido totalmente aberto, não proprietário, livre de patentes e de royalties, de propósito geral para média e alta qualidade (8kHz-48.0kHz, 16+ bit, polifônico) com áudio e música em taxas de bit fixos e variáveis de 16 a 128kbps por canal. Isto coloca o vorbis na mesma classe de competição do MPEG-4 (AAC), e similar, mas melhor, que o MPEG-1/2 audio layer 3 (MP3), MPEG-4 audio (TwinVQ), WMA e PAC. Vorbis pode tanto encodar e desencodar numa simples passada como também produzir transmissão em tempo real requerendo aproximadamente o mesmo poder de processamento do mp3. Ele será cada vez mais rápido com o passar do tempo. Ogg vorbis usa o formato bitstream Ogg; a extensão correta é .ogg. Algumas instituições estão substituindo os áudios MP3 por Ogg pois o MP3 tem restrições de exportação para alguns países devido às patentes de software.

Mas por que Vorbis? Nós já temos MP3 e não queremos mudar. Se você não pagar por uma cópia do encoder mp3, você é um tecnicamente um ladrão de acordo com as leis atualmente vigentes. Rigorosamente falando, usuários do encoder supostamente também deveriam pagar royalties para o Fraunhofer IIS (FhG)( http://www.iis.fhg.de/ ). Obviamente, os membros do MPEG tendem a não ir atrás dos indivídous pois isso seria uma tarefa quase impossível. Mas quando se fala de negócios a coisa é totalmente diferente. Se você tem um negócio, ou você paga royalties arbitrários (o FhG decide caso-a-caso e geralmente protege "exclusividades" que eles arrajaram com outras companias) ou você não transmite/encoda. Não existe uma solução de transmissão de baixo custo e irrestrita para pequenos negócios. As alternativas para MP3 também não são baratas. Exceto Ogg. Transmissão de Ogg (como rádio por internet) também é possível. Até a BBC de Londres já testou transmissões de Ogg Vorbis: http://slashdot.org/article.pl?sid=01/12/25/1853206&mode=thread . Alguns programas que reproduzem o formato Ogg - xmms - http://www.xmms.org/ - ogg123 - http://www.xiph.org/ogg/vorbis/ - jOggPlayer - http://www.gnu.org/directory/jOggPlayer.html - winamp - http://www.winamp.com/ Para instalar o codec vorbis no winamp entre em: http://www.winamp.com/plugins/ E digite "vorbis" no campo de procura. Ou vá direto para: http://www.winamp.com/plugins/detail.jhtml?componentId=60647 e carregue o arquivo "Nullsoft_Vorbis_Decoder.exe"

Referências: Página Oficial: http://www.xiph.org/ogg/vorbis/index.html Testemunhos: http://www.digit-life.com/articles/oggvslame/ http://www.brlug.net/archives/brluglist/1820.shtml Os problemas com as patentes de software: http://www.gnu.org/philosophy/patent-reform-is-not-enough.html http://www.researchoninnovation.org/patent.pdf http://www.linuxworld.com/linuxworld/lw-2000-03/lw-03-rms.html?4-4 Outros textos para ler:

Aula 2 - Praticando as TAGS

Atributos do <BODY>

Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (papel de parede da página): <BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor" VLINK="cor" BACKGROUND="imagem que vai aparecer"> Onde:

- BGCOLOR Cor de fundo (padrão: cinza ou branco) - TEXT

Cor dos textos da página (padrão: preto) - LINK

Cor dos links (padrão: azul) - ALINK Cor dos links, quando acionados (padrão: vermelho) - VLINK

Cor dos links, depois de visitados (padrão: azul escuro ou roxo) - BACKGROUND

Imagem de fundo. Saiba como colocar uma imagem de fundo. <body background="fundo1.jpg" bgcolor="FFCECB"> veja o resultado aqui

Em "cor", você pode colocar os valores de cores em inglês como: Preto = black Branco = white

Azul = blue

Amarelo = yellow Vermelho = red Você também pode usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais comum de definir cores usadas na Internet.. Com isso você pode colocar em sua página outras cores diferentes, como um azul-claro. Para isso você deve ter o código das cores, e no lugar de escrever o nome da cor em inglês, você coloca o valor da cor Algumas cores disponíveis RRGGBB (hexadecimal):

Cor - Código HTML PRETO - #000000

BRANCO - #FFFFFF VERMELHO - #FF0000 VERDE - #00FF00 AZUL - #0000FF ROSA - #FF00FF AMARELO - #FFFF00 Veja mais cores aqui

- Tags de título <H> - "Headings" Com elas você pode apenas definir o tamanho das letras, mas não o tipo de fontes. Veja agora como ficam as tags "headings" para cabeçalhos que vão do tamanho 1 até 6. <H1> Este é o primeiro nível </H1>

<H2> Este é o segundo nível </H2> <H3> Este é o terceiro nível </H3> <H4> Este é o quarto nível </H4> <H5> Este é o quinto nível </H5>

<H6> Este é o sexto nível </H6>

Este é o primeiro nível Este é o segundo nível Este é o terceiro nível Este é o quarto nível Este é o quinto nível Este é o sexto nível

- Tag <FONT> - Você pode também usar as tags de fonte no lugar das tags de "headings". Este tipo de tag é a mais usada, pois você pode definir mais facilmente o tamanho do texto e fonte que você deseja, e personalizar ainda mais a sua página. A tag é <FONT>, e dentro dela você pode definir vários parâmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes:

- Atributo FACE - FACE: Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim: <FONT FACE=fonte_da_letra>Texto</FONT> Exemplo: <FONT FACE=Times>Fonte Times New Roman </FONT> Resultado: Fonte Times New Roman <FONT FACE=Arial>Fonte Arial </FONT> Resultado:Fonte Arial <FONT FACE=Courier>Fonte Courier New </FONT> Resultado:Fonte Courier New - Atributo COLOR e SIZE - COLOR e SIZE: Atributos cor e tamanho: <font size="3"> A palavra terá o tamanho 3</font> A palavra terá o tamanho 3 <font color="red"> A palavra terá a cor vermelha </font> Resultado:A palavra terá a cor vermelha. Podemos também combinar as tags acima:

<font face="Arial" size="2" color="red">Palavra com tamanho 3 e em vermelho </font> Resultado: Palavra com tamanho 3 e em vermelho Formatando textos Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Assim: - Tags <B> , <U> , <I> e <CENTER> <B> Texto </B> - Resultado: Texto fica em Negrito. <U> Texto </U> - Resultado: Texto Sublinhado. <I> Texto </I> - Resultado: Texto em Itálico. <CENTER> Texto </CENTER> Texto centralizado. Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo: <CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER> O resultado é: Teste 1 e Teste 2 Parágrafos - Tag <P> - Parágrafos: Em HTML são necessários comandos para definir parágrafos. Não basta você simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. Você terá que colocar uma tag para um parágrafo ou para uma linha nova. Para fazer um parágrafo novo, basta colocar a tag <P>. Por exemplo, escreva no editor o seguinte, deste jeito: Parágrafo 1<P>Parágrafo 2. Blink A formatação <BLINK>frase</BLINK> foi uma das primeiras inovações introduzidas pelo Netscape. O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos efeitos que chamam a atenção do leitor, o BLINK será ainda mais um fator chamativo, o que causa um efeito final cansativo e confuso. Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript, como veremos em outra seção. Felizmente, são poucos os browsers que mostram o efeito dessa formatação. O Internet Explorer é um dos browsers que não consideram o BLINK.

Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou flechinhas), nunca em grande número, muito menos em frases inteiras ou cabeçalhos. - Linhas Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag <BR>. Por exemplo, escreva: Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2. O resultado será este: Parágrafo 1 Linha 1 Parágrafo 2 Linha 2

- Alinhamento de textos com a tag <P> Os parágrafos também podem ter atributos para o alinhamento dos textos. Basta apenas incluir depois do "P" o parâmetro "align=tipo de alinhamento". Os atributos são: - Left: Alinhamento à esquerda - Rigth: Alinhamento à direita - Center: Centralizado - Justify: Texto justificado (Só funciona em navegadores versão 4 ou superior) Para incluir um destes atributos é simples. Veja os exemplos:

<p align="left">Texto alinhado à esquerda</p>

<p align="right">Texto alinhado à direita</p>

<p align="center">Texto centralizado</p>

<p align="justify">Texto justificado</p>

Incluindo imagens TAG <IMG> Agora que você já sabe incluir e formatar os textos de sua página, é possível que você queira dar mais vida à sua página, incluindo imagens e fundos nela. Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não poderá usar o formato BMP. A tag para inserir uma imagem em sua página é a seguinte: <img src="nome do arquivo de imagem que vai aparecer"> Em "imagem que vai aparecer" você coloca o nome da imagem .gif ou .jpg ou o URL onde ela está para ser mostrada. Na verdade, apenas <img src="nome do arquivo de imagem que vai aparecer"> já seria o suficiente, mas com o tempo você vai precisar usar os outros atributos.

- Atributos de Imagem - Width e Height São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas definindo os tamanhos da imagem ela carregará mais rápido. Outra vantagem em usar o Width e Height é que você pode diminuir ou aumentar o tamanho de uma figura como você desejar, porém não recomendamos que você redimensione as imagens com esta opção. Se você quiser ter uma imagem menor, use um editor de imagem pra diminuir o tamanho dela, a imagem ficará mais bonita e também será mais leve para carregar. Se você tem uma página com galeria de imagens e uma "prévizualização" delas menores, sempre crie uma imagem menor com o editor de imagens, nunca use a imagem "maior" redimensionada, ela vai demorar muito a carregar e a vizualização não ficará boa.

- Alt

Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.

- Border

Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribuído é zero. Veja um exemplo de imagem com borda igual a zero:

Agora veja a mesma imagem com uma borda igual a 2:

Uma tag de imagem com os atributos acima combinados ficaria assim: <img src="nome do arquivo de imagem que vai aparecer alt="texto" border=0 width="largura da imagem" height="altura da imagem"> Um exemplo: <img src="orbita.gif alt="Aqui aparece o texto alternativo" border=1 width="100" height="50"> O resultado é:

- Dicas e Formato de Arquivos de imagem - TAMANHO EM Kb: Evite ao máximo colocar imagens maiores do que 30Kb em sua página pois, quanto mais arquivos tiver e quanto maiores eles forem, mais lenta será a transfência, não é bom ter imagens "pesadas" na página, isso só vai tornar o carregamento mais demorado e os visitantes podem acabar desistindo de esperar. Procure organizar e dividir as imagens em seu site de modo que ele não fique muito pesado, nem sempre agrada aos visitantes ter muitas imagens. - PROGRAMAS: É essencial que seja escolhido um bom programa de edição de imagens para que seu site tenha uma boa apresentação gráfica. Entre os mais usados estão o GIMP(Similar ao PhotoShop) e Inkscap(Similar ao CorelDraW) no Linux.

- O FORMATO GIF: Formato dominante na Internet, o GIF é um tipo de arquivo gráfico relativamente compacto (quando comparado com o BMP por exemplo) e o GIF pode ser transparente, não transparente ou animado. Um GIF transparente é aquele onde uma cor pode ser escolhida para ser transformada em transparente quando vista por um navegador e mostrar o que há embaixo. Os programas que são mais usados para criar gifs e permitem que se crie transparências são o Photoshop e o Fireworks. Os GIFS animados são aqueles que têm movimento. Nada mais são que uma seqüência de GIFS previamente preparados. O criador do GIF animado, usando um programa como o GIF Animator, escolhe as imagens que formarão a seqüência que dará a idéia de movimento. - O FORMATO JPEG (jpg): Grandes fotos geralmente são salvas neste formato pois, nestes casos, se consegue reduzir bastante o tamanho em bytes da imagem, sem prejudicar sua qualidade. É aconselhável, antes de mandar um arquivo GIF grande para Web, testar como ficaria se salvo como JPG. - O FORMATO PNG Desenvolvido como uma alternativa não patenteada para o formato GIF, o formato PNG (Portable Network Graphics) é usado para compactação sem perdas e para a exibição de imagens na Web. Ao contrário do GIF, esse formato oferece suporte para imagens de 24 bits e gera transparências de plano de fundo sem arestas irregulares. Entretanto, nem todos os navegadores da Web são compatíveis com imagens PNG. O formato PNG oferece suporte para imagens no modo RGB, Cores Indexadas, Tons de Cinza ou Bitmap sem canais alfa, além de preservar a transparência de imagens RGB e em tons de cinza. - O FORMATO BMP: Esses bitmaps, apesar de muito utilizados no Windows, são muito pesados para a Web. Se quiser colocar alguma imagem que estiver neste formato, salve-a antes como GIF ou JPG usando um editor de imagens como o Paint Shop Pro, Photoshop ou FireWorks . Alinhando as imagens Você pode usar muitos recursos para fazer o alinhamento de textos e imagens em sua página, e dar uma organização e visual diferentes. Para fazer os alinhamentos, você inclui parâmetros do alinhamento dentro da tag de imagem. Assim:

Veja como o texto fica na imagem. Este é um exemplo de alinhamento padrão; você não precisa incluir nenhuma tag.

Agora veja como o texto fica no topo da imagem. Este é um exemplo de alinhamento de texto no topo da imagem. Para fazer este tipo de alinhamento, a tag de imagem deve ficar assim: <img src="nome da imagem " align="top"> Repare que só incluímos o align="top" na tag de imagem.

Veja como o texto fica no meio da imagem. Este é um exemplo de alinhamento no meio da imagem. Para este efeito a tag de imagem deve ficar assim: <img src="nome da imagem" align="middle"> Repare que só incluímos o align="middle" na tag de imagem.

Veja que agora você tem um efeito onde o texto fica ao redor da imagem, igual ao texto em jornais. Trata-se de um ótimo recurso para quando você deseja colocar um texto ao lado de uma foto que destaque mais o assunto do texto.

A tag para este alinhamento é: <img src="nome da imagem" align="left">

Veja que agora a imagem está alinhada do lado direito e o texto fica ao redor. É exatamente o oposto do alinhamento à esquerda.

A tag para este alinhamento é: <img src="nome da imagem" align="right"> - Para se ter uma imagem centralizada: <CENTER><img src="nome da imagem"></CENTER> O resultado é:

Criando links Links são os pontos clicáveis do documento HTML que levam a qualquer outro documento da sua página ou site na Internet. Podemos fazer links internos, para documentos no mesmo servidor, links externos para qualquer lugar na Web, ou até mesmo links para um mesmo ponto dentro de uma página. Ambos dependem da tag:

<a href="nome-do-lugar-a-ser-levado">descrição</a> - "Nome-do-lugar-a-ser-levado" você coloca o arquivo html que você quer que seja visitado, por exemplo dados.htm ou por um URL como http://www.starmedia.com . - "Descrição" é o que vai aparecer sublinhado na home page indicando que pode ser clicado. Por exemplo, se a descrição fosse "Clique aqui para visitar a StarMedia", você colocaria este código: <a href="http://www.starmedia.com">Clique aqui para visitar a StarMedia </a> Resultado: Clique aqui para visitar a StarMedia Também existem os links para fazer com que as pessoas enviem um email. Se você quer um lugar para os usuários deixarem um email, faça assim: <a href="mailto:seuemail@gmail.com">Deixe um email para mim ! </a> Resultado: Deixe um email para mim! - Dica: Se você quiser colocar um link para uma outra página dentro da sua home page, você não precisa colocar todo o endereço como: http://orbita.starmedia.com/~seunome/pagina.html. Basta apenas colocar o nome do arquivo e, pronto, ficaria assim: <a href="pagina.html">Este é um link para uma página no seu site </a> - Como fazer um link abrir em outra janela? É possível que você queira colocar um link em sua página que abra em uma outra janela para que o visitante não saia do seu site, por exemplo, colocar um link para uma home page fora do site. Fazer isso é muito simples. Basta incluir um atributo "TARGET" (alvo), assim: <a href="http://www.starmedia.com" target="_blank" >Clique aqui para visitar a StarMedia </a> O resultado é: Clique aqui para visitar a StarMedia Se você clicar, será aberta uma nova janela. Há outras opções que podem ser colocadas como alvos, mas isso você verá mais adiante na seção de Frames, em HTML Avançado. - Como fazer um link para um ponto na mesma página? É possível fazer com que clicando em um link você vá diretamente para uma determinada pate da página. Este recuso é chamado de Âncoras. Você pode saber mais sobre este recursos na seção "Avançado" na barra de navegação.

- Como fazer uma imagem ter um link Você pode fazer com que uma imagem possa ter um link. É bem simples. Na tag de link, em vez de colocar o texto com a descrição, coloque a tag de imagem. Veja: <A HREF="nome-do-lugar-a-ser-levado"> <IMG SRC="nome do arquivo de imagem que vai aparecer"> </A> Em "nome-do-lugar-a-ser-levado" você coloca o arquivo html que você quer que seja visitado, por exemplo, dados.htm ou um URL como http://www.starmedia.com. Em "nome do arquivo de imagem que vai aparecer" você deve colocar o nome correto da imagem que vai estar na página, por exemplo, "foto.gif". Veja um exemplo de imagem com link: <A HREF="http://www.starmedia.com/orbita"><img src="orbita.gif" width="100" height="75" alt="Esta imagem tem um link para a StarMedia Home Pages" border="1"></a> O resultado é:

Repare que, além da tag "comum" de imagem, colocamos outros atributos como "border=1" (borda da imagem) , tamanho e o texto alternativo. Tudo isso você aprendeu na seção "Incluindo imagens". - Como fazer links para download de arquivos Para saber como fazer links para download de arquivos, você deve visitar a seção "Criar links para download" e descobrir todos os detalhes e dicas para criar os links. Criar links para download É provável que, depois de criar suas páginas, você queira colocar arquivos para que os visitantes façam download em sua home page. Este é um recurso bem fácil e simples. Vamos explicar. Não existe um comando que faça o download. O que acontece é que, sempre que aparece um tipo de arquivo que o navegador não reconhece, ele automaticamente inicia o download. Exemplo: Se o navegador não consegue abrir um arquivo "zip" (compactado), ele automaticamente inicia o download. Os links normalmente são direcionados a arquivos html. Se você deseja colocar um arquivo para download, tudo que você precisa fazer é direcionar o link para ele como se estivesse colocando um link para uma página. Exemplo: Para o download de um arquivo "exemplo.exe", o código de um link simples ficaria assim: <a href="exemplo.exe">Descrição do link</a> - Observações Existem alguns tipos de arquivos que você pode querer disponibilizar para download, mas que os navegadores, em vez de fazer o download, abrem com programas que você já tenha instalado. Se você, por exemplo, colocar um link para um arquivo de vídeo ".avi" ou

".mpg", o navegador abrirá o programa para exibir esse vídeo. Para evitar isso, a melhor solução é compactar estes arquivos para o formato .zip. Assim, não haverá problemas. Além disso, a compactação do arquivo faz com que ele fique menor e o download demore menos tempo para ser feito. Listas Você usa listas para criar menus simples ou organização de temas e textos em sua página. O HTML permite definir três categorias distintas de listas: - Ordenadas, - Sem ordenação - E uma especial, chamada lista de definição. - Listas Ordenadas As listas ordenadas são numeradas e só usam um bullet (marca de · ) para demarcar cada uma das linhas. Em listas ordenadas, o navegador se encarrega de colocar os números que referenciam cada lista. Uma lista ordenada deve ser envolvida pelo par <OL> ... </OL>. Exemplo 1: <OL> <LI> Primeiro item de uma lista ordenada <LI> Segundo item de uma lista ordenada <LI> Terceiro item de uma lista ordenada </OL> Produz o seguinte resultado: 1. Primeiro item de uma lista ordenada 2. Segundo item de uma lista ordenada 3. Terceiro item de uma lista ordenada - Listas sem Ordenação Em listas não ordenadas é utilizado algum símbolo gráfico. Este tipo de lista será envolvido pelo par <UL> ... </UL>. Para que o interpretador distinga um trecho de texto de uma lista deverá ser colocado no início de cada linha a diretiva <LI>, não havendo a necessidade de fechar esta tag com </LI>. Alguns exemplos: Exemplo 2: <UL> <LI> Primeiro item de uma lista não ordenada <LI> Segundo item de uma lista não ordenada <LI> Terceiro item de uma lista não ordenada </UL> Produz o seguinte resultado:

Primeiro item de uma lista não ordenada Segundo item de uma lista não ordenada Terceiro item de uma lista não ordenada - Listas Encadeadas O próximo exemplo será de uma lista encadeada. Você pode encadear tantas listas quantas quiser, desde que envolva cada nível de encadeamento com <OL> ... </OL> ou <UL> ... </UL>. <OL> <LI> Primeiro item de uma lista encadeada. <LI> Segundo item de uma lista encadeada. <UL> <LI> Terceiro item de uma lista encadeada. <LI> Quarto item de uma lista encadeada. </UL> <LI> Quinto item de uma lista encadeada. </OL> Produz o seguinte resultado: 1. Primeiro item de uma lista encadeada. 2. Segundo item de uma lista encadeada. o Terceiro item de uma lista encadeada. o Quarto item de uma lista encadeada. 3. Quinto item de uma lista encadeada. A numeração de listas ordenadas obedece ao nível de encadeamento das respectivas linhas. Não é preciso usar a tag <P> para forçar quebras de linha, pois os comandos <UL> e <OL> forçam uma quebra de linha automaticamente. Você pode incluir tags após cada tag de lista como uma tag para definir a fonte e o tamanho da letra ou a cor. Você pode combinar estas tags. Você também pode colocar links em cada lista, bastando apenas usar a tag de link logo após a tag de lista. Veja o exemplo: <OL> <LI><a href="#"> Primeiro item de uma lista ordenada com link </a> <LI> Segundo item de uma lista ordenada sem link <LI><a href="#"> Terceiro item de uma lista ordenada com link </a></OL> O resultado é: 1. Primeiro item de uma lista ordenada com link 2. Segundo item de uma lista ordenada sem link 3. Terceiro item de uma lista ordenada com link Inserindo Imagem de Fundo Da mesma forma que é possível definir uma cor de fundo diferente para as páginas, podese colocar uma imagem como papel de parede. Com isso você pode criar um site muito mais bonito.

Vamos explicar como colocar uma imagem de fundo e também características básicas sobre as imagens de fundo. A imagem de fundo é um atributo que colocamos dentro da Tag <BODY> que você aprendeu no início deste tutorial. Veja como fica: <BODY BACKGROUND="nome da imagem"> Em "nome da imagem" você coloca o nome do arquivo de imagem que você deseja que seja o fundo. Ele pode ser do tipo GIF ou JPG. - Características de imagens de fundo Quando uma imagem é menor que o tamanho da tela, o navegador se encarrega de "repetir" essa imagem por toda a tela para que ela possa cobrir todo o espaço. Este é um ótimo recurso, pois você não vai ter que criar uma imagem do tamanho da tela. Isso faria a imagem ser muito grande e demorar muito a carregar. Além disso, há muita diferença entre os tamanhos das telas dos micros. Letreiros e Linhas - Letreiros É possível colocar mais recursos em seu site. Um deles é o letreiro. A imagem fica "rolando" pela tela. Ele é feito com a tag "<MARQUEE>", porém este recurso só funciona no Internet Explorer. No Netscape, o texto ficará parado. Por isso analise bem quando valerá a pena usá-lo! Veja como usar este recurso: <MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Olá alunos não percam a prova de matemática</MARQUEE> - Em "BEHAVIOR" você coloca o tipo de efeito, que pode ser "SCROLL" ou "SLIDE". - Em "WIDTH" você pode definir o tamanho que o letreiro vai ocupar na tela. - TAG Blink A formatação <BLINK>frase</BLINK> foi uma das primeiras inovações introduzidas pelo Netscape. O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos efeitos que chamam a atenção do leitor, o BLINK será ainda mais um fator chamativo, o que causa um efeito final cansativo e confuso. Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript, como veremos em outra seção. Felizmente, são poucos os browsers que mostram o efeito dessa formatação. O Internet Explorer é um dos browsers que não consideram o BLINK. Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou flechinhas), nunca em grande número, muito menos em frases inteiras ou cabeçalhos.

- Linhas Com as linhas é possível que você crie separações entre textos e imagens. É muito simples criar uma linha. Basta incluir a tag <HR> (não é preciso fazer o fechamento dela). Veja o resultado:

Atributos da linha: Você pode definir atributos para a linha, como alinhamento, largura e cor. Veja como fazer: - WIDTH Você define a largura da régua, em pixels ou em porcentagem. Veja: <HR WIDTH=50%> insere uma linha que ocupa 50% do espaço disponível na tela. - ALIGN Define o alinhamento da régua que pode ser "Left" (esquerda), "Right" (direita) ou "Center" (centralizado): <HR WIDTH=100% ALIGN=RIGHT> insere uma linha de comprimento 100% (do espaço disponível na tela) e alinhada à direita. - COLOR Define a cor para a linha, este recurso não funciona no Netscape 4x. Para colocara cor, basta incluir ela na tag da seguinte forma: <HR WIDTH=100% COLOR="#FFFFFF> - NOSHADE Define se a linha vai ter um efeito tridimensional. Se você não incluir este atributo, a linha terá o efeito tridimensional. Exemplo combinando os atributos: <HR WIDTH=100% ALIGN=RIGHT COLOR="#CC0000" NOSHADE> Insere uma linha de comprimento 100% (do espaço disponível), alinhada à direita, sem efeito tridimensional (feito pelo atributo NOSHADE) e com cor vermelha.

Aula 3 - Tabelas, Frames e Formulários

Tabelas

As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegação e observações. Tabelas implementam um conceito importante de design, as "grades", segundo as quais organizamos textos e ilustrações de maneira organizada. Como já foi possível perceber, as tabelas podem conter textos, listas, parágrafos, imagens, diversas outras formatações - inclusive outras tabelas. Novas versões de HTML e de navegadores populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis. A formatação de tabelas faz parte da versão 3.0 da linguagem HTML. Manipular tabelas em HTML dá trabalho e necessita de calma. A tag para criação de uma tabela é <TABLE>, e dentro dela você coloca atributos importantes para a criação correta da sua tabela. Não esqueça de fazer o fechamento da tag com </TABLE>.

- Atributos de Tabela - <TABLE BORDER> O elemento delimita uma tabela e a espessura de sua borda: <TABLE BORDER=valor da espessura> ... </TABLE> - WIDTH e HEIGHT Com estes atributos, você pode definir o tamanho que a tabela vai ocupar na tela. WIDTH (largura), HEIGHT (altura). Eles podem ser em pixels ou em porcentagem. Basicamente o HEIGHT não é usado , mas o valor de largura é muito útil. Veja como usar: <TABLE BORDER=valor da borda WIDTH="valor da largura"> Um exemplo de tabela com valor de largura que ocupe 75% da tela (WIDTH="75%"): Coluna 1

Coluna 2

linha1, coluna 1

linha 1, coluna 2

linha 2, coluna 1

linha 2, coluna 2

- Dentro dessa formatação, inserimos as linhas e elementos da tabela: - <TH> ... </TH> Define um cabeçalho para a tabela - <TR> ... </TR> Delimita uma linha

- <TD> ... </TD> Delimita um elemento da tabela Veja como fica a tag para a criação de uma tabela com 2 linhas e 2 colunas: <TABLE BORDER=2> <TH> Coluna 1</TH><TH> Coluna 2 </TH> <TR><TD> linha1, coluna 1</td><td> linha 1, coluna 2 </TD></TR> <TR><TD> linha 2, coluna 1</TD><TD>linha 2, coluna 2 </TD></TR> </TABLE> Resultado: Coluna 1

Coluna 2

linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Agora veja a mesma tabela sem bordas (border=0): Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 - Atributos COLSPAN e ROWSPAN É possível dividir colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): <TABLE BORDER=2> <TH COLSPAN=2>Colunas 1 e 2</TH> <TR> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</T><TD>linha 2, coluna 2</TD></TR> <TH ROWSPAN=3>3 linhas juntas</TH> <TD>uma linha</TD> <TR><TD>duas linhas</TD></TR> <TR><TD>três linhas</TD></TR> </TABLE> Resultado: Colunas 1 e 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 uma linha 3 linhas juntas duas linhas três linhas

Neste exemplo, temos que o cabecalho Colunas 1 e 2 compreende duas colunas (colspan=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (rowspan=3). - Cores de fundo Quando você cria uma tabela, ela tem o fundo transparente e, portanto, vai sempre assumir a cor do fundo ou a imagem de fundo da página. Mas é possível que você defina uma cor de fundo para cada célula, linha e coluna da sua tabela. Para isso você deve incluir o atributo "BGCOLOR", veja como fica: <table border=2> <th bgcolor="#FF0000">Coluna 1</th> <th bgcolor="#009900">Coluna 2</th> <tr> <td>linha1, coluna 1</td> <td> linha 1, coluna 2</td> </tr> <tr> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> </tr> </table> Resultado: Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Você pode definir a cor de fundo de qualquer linha ou coluna que quiser, bastando apenas incluir o atributo junto da tag de linha ou coluna. Da mesma forma você pode incluir tags de fonte e imagem para colocar dentro de cada célula da tabela. - Imagem de fundo Você também pode colocar em uma tabela uma imagem de fundo, como um papel de parede somente para a tabela. Para isso, você só precisa colocar o atributo "BACKGROUND". Veja como fazer: <table border=2 background="nome da imagem que vai aparecer"> <th><font color="#000000">Coluna 1</font></th> <th><font color="#000000">Coluna 2</font></th> <tr> <td><font color="#000000">linha1, coluna 1</font></td> <td><font color="#000000"> linha 1, coluna 2</font></td> </tr> <tr> <td><font color="#000000">linha 2, coluna 1</font></td> <td><font color="#000000">linha 2, coluna 2</font></td> </tr> </table>

Resultado: Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Assim como quando colocamos uma imagem de fundo em uma página, a imagem de fundo em uma tabela será "repetida" até preencher todo o espaço da tabela. Onde houver uma cor de fundo definida para a célula, coluna ou linha a imagem de fundo não vai aparecer. Veja: Coluna 1

Coluna 2

linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2

Frames - Parte 1 Os frames são divisões da tela do navegador em diversas telas (ou "quadros"). Com isso, torna-se possível apresentar mais de uma página por vez, por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte. Trata-se de um recurso muito usado para criar menus de navegação em que o menu sempre está fixo e somente o outro frame muda para que apareçam as páginas. Para criar uma página com 2 frames, você terá que criar no mínimo 3 páginas, para resultar em uma. Isso porque, neste caso, cada frame é uma página HTML (2 frames) e há uma terceira página principal que vai ter as informações destes frames dentro dela. Para criar um frame, primeiro crie duas páginas simples e salve no mesmo diretório. Crie agora uma terceira página, com a seguinte tag: <HTML> <HEAD> <TITLE> Coloque o Título aqui </TITLE> </HEAD> <FRAMESET COLS=20%,80%> <FRAME SRC="a.html"> <FRAME SRC="b.html"> </FRAMESET> <BODY> </BODY> </HTML> Lembre-se de sempre colocar o código para os frames abaixo da tag </head> e antes da tag <body>. A parte FRAMESET define a divisão da página em "quadros". Neste exemplo, a página será dividida em duas colunas (Atributo COLS), sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela. Dentro da formatação de FRAMESET, temos os FRAME SRC, que são referências às páginas que

serão mostradas nos frames definidos Assim, aqui vemos que a página "a.html" será mostrada na primeira coluna (que ocupará 20% da tela), e "b.html" será mostrada na segunda (ocupando 80% da tela). Substitua "a.htm" para a primeira página que você criou por "b.htm" na segunda. Salve e veja o resultado. Este é o comando básico para fazer uma página com frames. Vamos ver os tipos de frames que é possível você criar. Na seção de "Download de Exemplos" você poderá baixar arquivos com exemplos de frames para facilitar a construção de suas páginas. Frames - Parte 2 Como já foi possível observar, FRAMESET tem atributos que definem a divisão da janela do navegador em colunas; essa divisão também pode ser feita em linhas, e utilizando uma combinação de "framesets" para variadas apresentações. Lembre-se de sempre colocar o código para os frames abaixo da tag </head> e antes da tag <body>. Confira os tipos mais comuns de divisões que você pode fazer. Você poderá fazer o download dos arquivos de exemplos neste tutorial. <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAME SRC="coluna2.html"> </FRAMESET> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="linha1.html"> <FRAME SRC="linha2.html"> </FRAMESET> <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="linha1.html"> <FRAME SRC="linha2.html"> </FRAMESET> </FRAMESET> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="linha1.html"> <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAME SRC="coluna2.html"> </FRAMESET> </FRAMESET> Lembre-se de que os frames fixos não precisam ter nomes, mas os frames que receberão textos, sim! O exemplo simples visto até agora segue o modelo da primeira composição (em colunas). As composições com mais de um frameset precisam ser bem planejadas para funcionarem bem. Os valores dos atributos COLS e ROWS, você pode alterar conforme a necessidade.

- Atributos Especiais: Até este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME). Outros atributos permitem um maior controle sobre a apresentação: - FRAMEBORDER="NO" Eliminação das bordas dos frames: "NO" sem bordas, "YES" com bordas. - BORDER="valor do espaço" Eliminação do espaço entre os frames. - SCROLLING="NO" Frame sem barra de rolagem. A opção "YES" define a existência da barra de rolagem. Combinando estes atributos em uma tag de frames simples teríamos: <FRAMESET COLS="20%, 80%" FRAMEBORDER="NO" BORDER="0" SCROLLING="NO"> <FRAME SRC="col1.html"> <FRAME SRC="col2.html"> </FRAMESET> Frames - Parte 3 Sempre que se aciona um link dentro de uma página, o padrão é que a página referente a esse link seja carregada na mesma janela da página anterior. No exemplo visto com frames, seguir um link dentro da janela à direita faz com que a página apontada seja mostrada ocupando a janela da direita (coluna de 80%). Para isso você tem que indicar ao navegador, em que frame deseja que a página do link seja mostrada. Para isso você usa o atributo "NAME". <HTML> <HEAD> <TITLE>Coloque o Título aqui</TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="coluna1.html"> <FRAME SRC="coluna2.html" NAME=principal> </FRAMESET> </HTML> Veja no código-fonte acima que o frame associado à coluna2.html tem um atributo NAME. Isso faz com que se possa "direcionar" o frame em que queremos mostrar determinada página ao acionarmos um link. Veja como ficaria a tag de link para isso: <a href="apresenta2.html" target="principal">Exemplo</a>. Quando se acionar esse link, a página será mostrada no frame onde está a coluna2.html, ou seja, em vez de carregar o link na mesma coluna em que está coluna1.html, ela será mostrada na coluna em que está coluna2.html. O "Target" define que o link deve abrir no frame que tem este nome, no caso o "coluna2.html". Você define o nome de cada frame e, no target, você define para qual frame será aberto o link.

Download de Exemplos Agora que você já viu como criar os frames e alterar seus atributos, você poderá fazer o download de arquivos de exemplo que vão servir para que você possa ter uma idéia e uma base para o início da construção de suas páginas com frames. Ao lado de cada exemplo você encontra o link para fazer o download do arquivo que está no formato "exe". Todos devem ser colocados em um mesmo diretório. Abrindo o arquivo "principal.html" você vê o exemplo, os outros arquivos são os frames que você poderá editar com tudo aquilo que você está aprendendo aqui. Exemplo 1: Fazer o download deste exemplo Exemplo 2: Fazer o download deste exemplo Exemplo 3: Fazer o download deste exemplo Exemplo 4: Fazer o download deste exemplo

Formulários - Parte 1 Um formulário é um modelo para a entrada de um conjunto de dados. Eles são muito usados em registros eletrônicos ou em formulários para o envio de emails para as páginas sem precisar abrir um programa de email ou digitar endereços, além da vantagem de ter campos para cada tipo de informação. O primeiro passo para fazer formulários é aprender as tags que fazem os campos de entrada de dados. O elemento <FORM> inicia um formulário e contém uma seqüência de elementos de entrada e de formatação do documento. <FORM ACTION="URL_de_script" METHOD=método>...</FORM> - Atributos da tag <FORM> - ACTION Especifica o URL do script ao qual serão enviados os dados do formulário. - METHOD Seleciona um método para acessar o URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do navegador para o servidor, com a seguinte diferença básica:

. POST Os dados inseridos fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados. . GET Os dados inseridos fazem parte do URL associado à consulta enviada para o servidor; suporta até 128 caracteres. Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Em especial, colocamos dentro da marcação de <FORM> as formatações para campos de entrada de dados, que são três: <INPUT>, <SELECT> e <TEXTAREA>. Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome, utilizado posteriormente pelo sistema para enviar os dados. Normalmente são usados "scripts". Os scripts que organizam esses dados de entrada de todos os campos em um conjunto de informações e realizem uma tarefa programada, como por exemplo enviar os dados do formulário para o seu email. HTML não tem condições de fazer isso, por isso é necessário utilizar scripts CGI, PERL ou ASP para executar estas tarefas, porém estes tipos de scripts necessitam de aprendizado mais dedicado para se criar o que você deseja e são muito mais complexos do que a linguagem HTML, pois eles processam informações. Você pode usar scripts prontos em seus formulários, mas no momento ainda não é possível membros da StarMedia Home Pages executarem os scripts nos servidores. Formulários - Parte 2 Agora precisamos criar os campos onde os usuários vão digitar os dados e selecionar as opções. Você inclui estes campos dentro da tag <FORM>. Conheça a função de cada um e como criá-los: <INPUT> Esta é a tag para iniciar a criação de campos de dados. Há vários atributos que permitem a criação de diferentes campos de entrada de dados. Vejamos: - Campo de dados texto Quando INPUT não apresenta atributos, assume-se TYPE=TEXT como padrão à formatação: <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome"> </FORM> Ou apenas: <FORM> Nome: <INPUT NAME="Nome"> </FORM> Resultado: Nome: - Campo de dados de texto em formato senha

Entrada de texto na qual os caracteres são escondidos por asteriscos. É muito usado para entradas de senhas, como se pode ver no exemplo. <FORM> Usuário: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME="senha"> </FORM> Resultado: Usuário: Senha: - Atributo NAME Ele é especialmente para que você dê um nome ao campo, ele não aparece na página, mas serve para identificar o campo e o valor digitado no email que você receber, nunca deixe de definir o nome dos campos, só assim você você poderá saber o que cada usuário preencheu em cada campo. Por exemplo se você tem vários campos de texto, cada um para um tipo de infromação diferente, você usa o name para identificar o campo. Você vai ver sempre que em todas as tags INPUT este atributo está presente. Basta incluir ele da seguinte forma: <INPUT TYPE=TEXT NAME="coloque o nome do campo"> - Atributo VALUE - VALUE Pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usuário não preencher este campo, será adotado este valor padrão. Se o usuário quiser inserir dados, ele somente precisará apagar o que já estiver escrito. Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome"> Resultado: Nome:

Seu nome

- Atributo SIZE - SIZE Especifica o tamanho do espaço no vídeo para o campo do formulário. Só é válido para campos TEXT e PASSWORD. O valor padrão é 20. <FORM> Endereço: <INPUT TYPE=TEXT SIZE=35> </FORM> Endereço: - Atributo MAXLENGTH

- MAXLENGTH É o número de caracteres aceitos em um campo de dados; este atributo só é válido para campos de entrada TEXT e PASSWORD. <FORM>Dia do mês: <INPUT TYPE=TEXT NAME="ex" MAXLENGTH=2> </FORM> Resultado: Dia do mês: Apenas 2 caracteres serão lidos pelo formulário, não importa o quanto se escreva neste campo. - Campo de Dados Escondido (Hidden) Este tipo de campo funciona igual a um campo de texto, só que ele não aparece no formulário para o visitante. Ele está lá no código, mas o visitante não pode vê-lo ou alterá-lo. Isso é importante para você incluir informações que achar necessárias, mas que não deseja que o visitante altere. Veja um exemplo: <FORM> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM> Aqui o campo está escondido. O visitante não o vê, mas ele vai ser processado pelo formulário. Você pode incluí-lo sem problemas junto com os outros elementos. Por exemplo: <FORM> Usuário: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME="senha"> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM> - Múltipla escolha Você também pode criar um campo onde o usuário só precisa selecionar as opções, sem digitar nada. Há dois tipos básicos de seleção: - CHECKBOX Insere um botão de escolha de valores para várias opções. <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="basquete">Basquete <br > <INPUT TYPE=CHECKBOX NAME=esporte VALUE=bocha>Bocha Um atributo "CHECKED" marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida": <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED&>Vôlei <br> <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol Resultado:

Esportes que você pratica: Futebol Vôlei Natação Basquete Tênis Bocha - Escolha única - RADIO Insere um botão de escolha de valores para uma opção, isto é, somente uma alternativa pode ser escolhida. <INPUT TYPE=RADIO NAME="time" VALUE="palm">Palmeiras <br> <INPUT TYPE=RADIO NAME="time" VALUE="inte">Internacional Uma diretiva CHECKED marca uma escolha inicial - se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida": <INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>Cruzeiro <br> <INPUT TYPE=RADIO NAME="time" VALUE="naut">Náutico Resultado: Seu time do coração: Palmeiras

Internacional

Cruzeiro

- Botões de ação Os botões são usados para executar ações dentro do formulário, como enviar os dados ou limpar os campos. - SUBMIT Apresenta o botão que causa o envio dos dados de entrada para o servidor. <FORM> <INPUT TYPE=SUBMIT> </FORM> Resultado: É possível modificar a mensagem desse botão através do atributo VALUE. <FORM> <INPUT TYPE=SUBMIT VALUE="Envia mensagem"> </FORM>

- RESET Restaura os valores iniciais das entradas de dados. <FORM> <INPUT TYPE=RESET> </FORM> Resultado: É possível modificar a mensagem desse botão através do atributo VALUE <FORM> <INPUT TYPE=RESET VALUE="Apaga tudo!"> </FORM> Formulários - Parte 3 - <SELECT> Apresenta uma lista de valores em um menu suspenso. Ótimo para criar escolhas que o usuário seleciona sem precisar digitar através de campos <OPTION>. Veja como fazer: . <SELECT NAME="sabor"> <OPTION>Abacaxi <OPTION>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> Resultado:

- Atributo SELECTED Também é possível estabelecer uma escolha-padrão, através do atributo SELECTED <SELECT NAME="sabor"> <OPTION>Abacaxi <OPTION SELECTED>Creme <OPTION>Morango <OPTION>Chocolate </SELECT> Resultado: Aqui o Creme já aparece previamente selecionado. - Atributo SIZE

Com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados (no exemplo, SIZE=4):

- <TEXTAREA>

Abre uma área para entrada de texto, de acordo com atributos para número de colunas, linhas, e - se for o caso - um valor inicial. É um campo onde as pessoas poderão digitar mais texto do que nos campos de texto que vimos na parte 2. Além disso, o usuário pode ver o texto que está digitando. A tag fica assim:

<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA> Resultado: Deixe seu comentário

Repare que, no atributo "COLS", definimos o número de colunas para a largura do campo de texto e, em "ROWS", o número de linhas para o campo de texto. Se o usuário digitar mais do que cinco linhas, surgirá uma barra de rolagem para ele cortar o texto se desejar.

Os valores destes atributos podem ser modificados à vontade de acordo com a sua necessidade.

Inserindo Sons Você pode incluir em sua página um som de fundo. Com isso, sempre que alguém acessar sua página, este som será tocado. Desta forma você pode fazer seu site ter mais recursos e personalidade.

Os arquivos de som ideais para serem inseridos em uma home page são aqueles no formato MIDI (.MID), mas você também pode incluir sons do tipo WAVE (.WAV). O Netscape e o Internet Explorer têm algumas diferenças em seu sistema e, por isso, em algumas versões do Netscape o som pode não tocar. A tag deve ser <EMBED>. Veja o exemplo: <embed src="nome da música" autostart="true" loop=10>

- Em "nome da musica" você coloca o nome da música mid ou wav. - Em "loop" você coloca o número de vezes que o som vai ser repetido. - Em "autostart" você define se quer que a música comece a tocar sozinha (atributo TRUE), se você colocar "FALSE" o usuário terá que clicar no botão de "play"para ouvir a música. Se você quiser que ele fique se repetindo infinitamente, basta colocar "infinity" no lugar de um número. Não é necessário colocar "</embed>" neste caso. Âncoras Âncoras são links estabelecidos para certas partes de uma mesma página ou de outra página qualquer, por exemplo, se você quer que um link vá direto para um texto que está no meio de uma página sem o visitante ter que descer a página. Por exemplo, clicando aqui você salta automaticamente para o fim da página.

Para o funcionamento de uma âncora deve-se estabelecer dois comandos: - Um que defina o lugar da página para onde se pretende "saltar" e - Outro que identifique esse ponto de destino. - Links com âncoras para uma mesma página. Você pode fazer com que links saltem para determinados pontos de uma mesma página, facilitando a navegação. Veja como. Primeiro vamos definir o ponto de destino. Você deve incluir a seguinte tag exatamente no local onde quer que o link vá: <A NAME="Coloque o nome da ancora aqui"></A> - NAME é um parâmetro que define um ponto de destino. - Agora você pode usar a tag de link "comum" para fazer o link saltar para o ponto onde você definiu: <a href="#nome da ancora">Texto</a> Repare que há um símbolo "#" antes do nome da âncora. É ele que vai fazer o navegador entender que deve ir para a âncora que você definiu. - Links com âncoras para uma outra página Agora digamos que você queira que o link vá para uma outra página e direto para um texto no final dela. Primeiro você deve incluir, na página de destino, a tag da âncora no ponto onde ela vai aparecer ela depois de clicar no link, e salvar a página. Em seguida, na página que terá o link, você deve construir a tag assim: <a href="nome-do-lugar-a-ser-levado#nome da ancora">Texto</a> Em "nome-do-lugar-a-ser-levado" você coloca o URL ou a página html que vai ser mostrada e, depois do destino, o "#nome da ancora". Este nome de âncora deve ser o mesmo nome de âncora que você definiu na página de destino.

Você pode incluir quantas âncoras quiser em sua página, mas lembre-se de que cada uma deve ter um nome diferente. Cores Hexadecimais A tabela abaixo apresenta os códigos de cores que podem ser utilizados em documentos HTML. As cores marcadas por um asterisco vermelho podem ser escritas no lugar dos códigos. Nome da cor

Código da cor

* Red * Green * Blue Magenta Cyan * Yellow * Black * Aqua Baker's Chocolate Blue Violet Brass Bright Gold Brown Bronze Bronze II Cadet Blue Cool Copper Copper Coral Corn Flower Blue Dark Brown Dark Green Dark Green Copper Dark Olive Green Dark Orchid Dark Purple Dark Slate Blue Dark Slate Grey Dark Tan Dark Turquoise Dark Wood Dim Grey Dusty Rose Feldspar Firebrick

#FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00 #000000 #70DB93 #5C3317 #9F5F9F #B5A642 #D9D919 #A62A2A #8C7853 #A67D3D #5F9F9F #D98719 #B87333 #FF7F00 #42426F #5C4033 #2F4F2F #4A766E #4F4F2F #9932CD #871F78 #6B238E #2F4F4F #97694F #7093DB #855E42 #545454 #856363 #D19275 #8E2323

Aparência

Forest Green #238E23 Gold #CD7F32 Goldenrod #DBDB70 *Gray #C0C0C0 Green Copper #527F76 Green Yellow #93DB70 Hunter Green #215E21 Indian Red #4E2F2F Khaki #9F9F5F Light Blue #C0D9D9 Light Grey #A8A8A8 Light Steel Blue #8F8FBD Light Wood #E9C2A6 *Lime #32CD32 Mandarian Orange #E47833 *Maroon #8E236B Medium Aquamarine #32CD99 Medium Blue #3232CD Medium Forest Green #6B8E23 Medium Goldenrod #EAEAAE Medium Orchid #9370DB Medium Sea Green #426F42 Medium Slate Blue #7F00FF Medium Spring Green #7FFF00 Medium Turquoise #70DBDB Medium Violet Red #DB7093 Medium Wood #A68064 Midnight Blue #2F2F4F * Navy #23238E Neon Blue #4D4DFF Neon Pink #FF6EC7 New Midnight Blue #00009C New Tan #EBC79E Old Gold #CFB53B Orange #FF7F00 Orange Red #FF2400 Orchid #DB70DB Pale Green #8FBC8F Pink #BC8F8F Plum #EAADEA Quartz #D9D9F3 Rich Blue #5959AB Salmon #6F4242

Scarlet Sea Green Semi-Sweet Chocolate Sienna * Silver Sky Blue Slate Blue Spicy Pink Spring Green Steel Blue Summer Sky Tan Thistle Turquoise Very Dark Brown Very Light Grey Violet * White

#8C1717 #238E68 #6B4226 #8E6B23 #E6E8FA #3299CC #007FFF #FF1CAE #00FF7F #236B8E #38B0DE #DB9370 #D8BFD8 #ADEAEA #5C4033 #CDCDCD #4F2F4F #FFFFFF

Aula 4 - Caracteres especiais

Caracteres especiais HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caracter desejado, e um ; final. Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência: Entidade Caracter &lt; &gt; &amp;

< > &

Outras sequências de escape suportam caracteres ISO Latin1. Aqui está uma tabela com os caracteres mais utilizados em Português: Entidade

Caracter

Entidade

Caracter

&aacute; &acirc; &agrave; &atilde; &ccedil; &eacute; &ecirc; &iacute; &oacute; &ocirc; &otilde; &uacute;

á â à ã ç é ê í ó ô õ ú

&Aacute; &Acirc; &Agrave; &Atilde; &Ccedil; &Eacute; &Ecirc; &Iacute; &Oacute; &Ocirc; &Otilde; &Uacute;

Á Â À Ã Ç É Ê Í Ó Ô Õ Ú

&uuml;

&Uuml;

Como vemos, as sequências de escape são sensíveis à caixa. Os editores de HTML fazem essa tradução automaticamente. Alguns editores, no entanto, mantêm a acentuação, sem usar as entidades de formatação. Quando isso acontece, deve-se inserir uma indicação do esquema de codificação ISO Latin1, escrevendo: <HTML> <HEAD> <TITLE>...</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> </HEAD> ...

Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo, &copy;, que é o símbolo ©, &reg; para ®, e &sect; para §. Também se pode usar seqüências com códigos ASCII, por exemplo: &#191;Qué pasa, señor?

¿Qué pasa, señor?

Tabela de acentos e caracteres especiais em HTML

Á .............. &Aacute; á ............... &aacute; Â ................. &Acirc; â ................ &acirc; À ............... &Agrave; à ............... &agrave; Å ................. &Aring; å ................ &aring; Ã ................ &Atilde; ã ............... &atilde; Ä .................. &Auml; ä ................. &auml; Æ ................. &AElig; æ .................. &aelig; É ................ &Eacute; é ............... &eacute; Ê ................. &Ecirc; ê ................ &ecirc; È ................ &Egrave; è ............... &egrave; Ë .................. &Euml; ë ................. &euml; Ð ................... &ETH; ð .................. &eth;

Í ................ &Iacute; í ............... &iacute; Î ................. &Icirc; î ................ &icirc; Ì ................ &Igrave; ì ............... &igrave; Ï .................. &Iuml; ï ................. &iuml; Ó ........... &Oacute; ó .............. &oacute; Ô ................ &Ocirc; ô ................. &ocirc; Ò .............. &Ograve; ò ............... &ograve; Ø ................ &Oslash; ø ............... &oslash; Õ ................ &Otilde; õ ............... &otilde; Ö .................. &Ouml; ö ................. &ouml;

Ú .............. &Uacute; ú ............... &uacute; Û ................ &Ucirc; û ................ &ucirc; Ù ............. &Ugrave; ù .............. &ugrave; Ü ................. &Uuml; ü ................. &uuml; Ç ............... &Ccedil; ç ............... &ccedil; Ñ ............... &Ntilde; ñ ............... &ntilde; < ................. &lt; > ................. &gt; & ................ &amp; " ................. &quot; ® .................. &reg; © ............... &copy; Ý ............ &Yacute; ý ............ &yacute; Þ .............. &THORN; þ ................ &thorn; ß ................ &szlig;

Caracteres Acentuados no Português á &aacute; Á &Aacute; ã &atilde; Ã &Atilde; â &acirc; Â &Acirc; à &agrave; À &Agrave; é &eacute; É &Eacute; ê &ecirc; Ê &Ecirc; í &iacute; Í &Iacute; ó &oacute; Ó &Oacute; õ &otilde; Õ &Otilde; ô &ocirc; Ô &Ocirc; ú &uacute; Ú &Uacute; ü &uuml; Ü &Uuml; ç &ccedil; Ç &Ccedil; Caracteres Especiais espaço &nbsp; & e comercial &amp; > maior que &gt; < menor que &lt; ˆ acento circunflexo &circ; ˜ acento til &tilde; ¨ acento trema &uml; ´ acento agudo &cute; ¸ cedilha &cedil; " aspas duplas &quot; Ŗ e ŗ aspas duplas (esquerda e direita) &ldquo; e &rdquo; Ř e ř aspas simples (esquerda e direita) &lsquo; e &rsquo; ‹ e › aspas angulares simples (esquerda e direita) &lsaquo; e &rsaquo; « e » aspas angulares duplas (esquerda e direita) &laquo; e &raquo; º ordenal masculino &ordm; ª ordinal feminino &ordf; Ŕ travessão Řenř &ndash; ŕ travessão Řemř &mdash; hífen oculto &shy; ¯ macron &macr; … reticências &hellip; ¦ barra vertical &brvbar; • marcador (bullet) &bull; ¶ parágrafo &para; § parágrafo legal &sect; Caracteres Comerciais © copyright &copy; ® marca registrada &reg ™ trade mark &trade; £ libra esterlina &pound; ¢ centavo &cent;

€ euro &euro; ¥ iene (yen) &yen; ¤ símbolo monetário &curren; ₢ Cruzeiro (Brasil) &#8354; &#8355; ₣ Franco (França) &#8356; ₤ Lira (Itália) &#8357; ₥ Mill (US$.001) &#8358; ₦ Naira (Nigéria) ₧ Peseta (Espanha) &#8359; &#8360; ₧ Rupee (India) &#8361; ₨ Won (Coréia) ₪ New sheqel (Israel) &#8362; &#8363; ₫ Dong (Vietnam) &#8365; ₩ Kip (Laos) ₪ Tugrik (Mongólia) &#8366; ₫ Drachma (Greece) &#8367; Caracteres Matemáticos e Lógicos ¹ elevado a um &sup1; ² ao quadrado &sup2; ³ ao cubo &sup3; ½ fração um meio &frac12; ¼ fração um quarto &frac14; ¾ fração três quartos &frac34; ⅛ fração um oitavo &#8539; ⅜ fração três oitavos &#8540; ⅝ fração cinco oitavos &#8541; ⅞ fração sete oitavos &#8542; > maior que &gt; < menor que &lt; ± mais ou menos &plusmn; − sinal de subtração &minus; × sinal de multiplicação &times; ÷ sinal de divisão &divide; asterisco &lowast; ∗ ⁄ barra de fração &frasl; ‰ por-mil &permil; ∫ sinal de integral &int; ∑ somatório &sum; ∏ PI &prod; √ raiz quadrada &radic; ∞ infinito &infin; ≈ quase igual &asymp;

aproximadamente igual &cong; ≅ proporcional &prop; ∝ idêntico &equiv; ≡ ≠ diferente &ne; ≤ menor ou igual &le; ≥ maior ou igual &ge; consequentemente &there4; ∴ ponto &sdot; ⋅ · ponto do meio &middot; ∂ diferença parcial &part; parte imaginária do número &image; ℑ parte real do número &real; ℜ minuto &prime; ′ segundo &Prime; ″ ° grau &deg; ângulo &ang; ∠ perpendicular &perp; ⊥ nabla &nabla; ∇ soma direta &oplus; ⊕ produto de vetor &otimes; ⊗ alef &alefsym; ℵ ø produto vazio &oslash; Ø produto vazio &Oslash; elemento de/pertence a &isin; ∈ nã é elemento de &notin; ∉ interseção &cap; ∩ união &cup; ∪ subconjunto de &sub; ⊂ superconjunto de &sup; ⊃ subconjunto de ou igual a &sube; ⊆ superconjunto de ou igual a &supe; ⊇ existe &exist; ∃ qualquer &forall; ∀ vazio &empty; ∅ ¬ não lógico &not; e lógico &and; ∧ ou lógico &or; ∨ retorno de carro &crarr; ↵ ← e → setas simples &larr; e &rarr; ↑ e ↓ setas simples &uarr; e &darr; ↔ seta simples &harr; &lArr; e &hrrr; ⇐ e ⇒ setas duplas

⇑e⇓ ⇔ ⌈e⌉ ⌊e⌋ ◊

setas duplas seta dupla teto (esquerdo e direito) piso (esquerdo e direito) losango

&uArr; e &dArr; &hArr; &lceil; e &rceil; &lfloor; e &rfloor; &loz;

Outros Acentos e Caracteres Especiais ñ &ntilde; Ñ &Ntilde; ¡ &iexcl; ¿ &iquest; ä &auml; Ä &Auml; å &aring; Å &Aring; ë &euml; Ë &Euml; è &grave; È &Egrave; ï &iuml; Ï &Iuml; ì &igrave; Ì &Igrave; î &icirc; Î &Icirc; ö &ouml; Ö &Ouml; ò &ograve; Ò &Ograve; ù &ugrave; Ù &Ugrave; û &ucirc; Û &Ucirc; ý &yacute; Ý &Yacute; ÿ &yuml; Ÿ &Yuml; æ &aelig; Æ &AElig; œ &oelig; Œ &OElig; † &dagger; ‡ &Dagger; š &scaron; Š &Scaron; þ &thorn; Þ &THORN; ð &eth; Ð &ETH; § &sect; ƒ &fnof; ß &szlig; µ &micro; Caracteres Gregos α &alpha; Α &Alpha; β &beta; Β &Beta; γ &gamma; Γ &Gamma; δ &delta; Γ &Delta; ε &epsilon; Δ &Epsilon; δ &zeta; Ε &Zeta; ε &eta; Ζ &Eta; ζ &theta; Θ &Theta; η &iota; Η &Iota; θ &kappa; Κ &Kappa; ι &lambda; Λ &Lambda; κ &mu; Μ &Mu; λ &nu; Ν &Nu; μ &xi; Ξ &Xi; ν &omicron; Ο &Omicron; π &pi; Π &Pi; ξ &rho; Ρ &Rho; ζ &sigma; ΢ &Sigma; ο &sigmaf; η &tau; Σ &Tau; π &upsilon; Τ &Upsilon; θ &phi; Φ &Phi; ρ &chi; Υ &Chi; ς &psi; Φ &Psi; σ &omega; Χ &Omega; ϑ &thetasym; ϒ &upsih; ϖ &piv; Planetas e Signos do Zodíaco ☿ Mercúrio ♀ Vênus ♁ Terra ♂ Marte ♃ Júpiter

&#9791; &#9792; &#9793; &#9794; &#9795;

♄ Saturno

&#9796;

♅ Urano

&#9797;

♆ Netuno

&#9798;

♇ Plutão

&#9799;

♈ Áries

&#9800;

♉ Touro

&#9801;

♊ Gêmeos

&#9802;

♋ Câncer

&#9803;

♌ Leão

&#9804;

♍ Virgem

&#9805;

♎ Libra

&#9806;

♏ Escorpião

&#9807;

♐ Sagitário

&#9808;

♑ Capricórnio &#9809; ♒ Peixe

&#9810;

♓ Aquário

&#9811;

Naipes do Baralho ♠ espadas &spades; ♤ espadas &#9828; &clubs; ♣ paus &#9831; ♧ paus ♥ copas &hearts; ♡ copas &#9825; ♦ ouros &diams; ♢ ouros &#9826;

Sinalização ☠ Venenoso &#9760; ☡ Cuidado

&#9761;

☢ Radioativo &#9762; ☣ Venenoso &#9763; ☤ Caduceu

&#9764;

Peças de Xadrez ♔ Rei branco

&#99812;

♕ Rainha branca &#99813; ♖ Torre branca &#99814; ♗ Bispo branco &#99815; ♘ Cavalo branco &#99816; ♙ Peão branco

&#99817;

♚ Rei preto

&#99818;

♛ Rainha preta &#99819; ♜ Torre preta

&#99820;

♝ Bispo preto

&#99821;

♞ Cavalo preto &#99822; ♟ Peão preto

&#99823;

Acho que aprendemos muita coisa de caracteres especiais. Aula 5 - Blocos de Textos

É usado para citações longas: <blockquote>A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.</blockquote> (Stephen W. Hawking, “Uma Breve História do Tempo”)

A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional. (Stephen W. Hawking, ŖUma Breve História do Tempoŗ) <ADDRESS>

Usado para formatar endereços E-mail e referências a autores de documentos: Envie críticas e sugestões para <address>flavio.bacelar@seduc.pa.gov.br</address>

Envie críticas e sugestões para flavio.bacelar@seduc.pa.gov.br - Formatação de frases Como visto anteriormente (em Formatação de Textos e Caracteres), HTML permite dois tipos de formatação: lógico e físico; aqui veremos as formatações mais utilizadas: Estilos Lógicos <CITE>

Para títulos de livros, filmes, e citações curtas. Exemplo: Assisti Guerra nas Estrelas umas oito vezes! <CODE>

Para indicar trechos de código de programas. Exemplo: for (x=0); cl &&(!feof(stdin)); x++)); <DFN>

Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo: CERN: Centre d’Éstudes et Recherches Nucleaires <EM>

Ênfase, também normalmente apresentado em itálico. Exemplo: É preciso pesquisar muito para encontrar o termo exato. <KBD>

Indica uma entrada via teclado. Exemplo: Para ler mensagens recebidas, digite pine -i <SAMP>

Indica uma seqüência de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo: O resultado do primeiro applet é: Hello, World! <STRONG>

Forte ênfase, mostrado normalmente em negrito. Exemplo: Antes de enviar um e-mail, confira o campo “Subject:”! <VAR>

Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo: No campo Login, escreva guest. Estilos Físicos <B>

Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado) <I>

Itálico (em alguns casos, caracteres inclinados) <TT>

Tipo teletype - fonte de espaçamento fixo. <U>

Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links. <STRIKE> ou <S> Frase riscada. <BIG>

Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB>

Frase em estilo índice, como em H2O. <SUP>

Frase em estilo expoente, como em Km2. Aula 6 - Incorporando Código Icorporando Código ao seu Blog Exemplo tirado do Blog da Rádio WEb SEDUC-PA <p align="center"> <textarea cols="10" onfocus="this.select()" onmouseover="this.focus()" style="width: 170px; height: 90px;" name="textarea">&lt;br /&gt;&lt;center&gt;&lt;a&gt; &lt;img src="http://2.bp.blogspot.com/_4oZ9uzFwvnU/TUBSsldNjGI/AAAAAAAAANk/f1yiauNp5a4/s 1600/logomarcapadrao.png" widht="170" height="250" /&gt; &lt;embed src="http://radioescola.seduc.pa.gov.br:8000/transmissao_radioseduc.ogg" loop="false" autoplay="true" height="35" width="210"&gt;&lt;/embed&gt;&lt;/a&gt;&lt;/center&gt; &lt;br /&gt;&lt;br /&gt;</textarea>Copie cole em seu blog</p>

<br /><center> src="http:// w idht="17

Resultado depois de c贸piar e colar no blog do visitante:

Um grande abra莽o! Contatos: ctaeseducpa@gmail.com 3201-5146