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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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.
- C - CC (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 e-mail 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.
- D - Diretó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.
- E - Emoticons - 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).
- F - FAQ (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.
- G - Gateway - Um dispositivo que conecta redes que normalmente não se comunicam, permitindo a transferência de informação de uma para outra. GIF (Graphics Interchange Format) - Tipo de arquivo de armazenamento de imagens, desenvolvido pela Compu Serve e amplamente difundido na Internet. Esses arquivos são identificados pela extensão .gif. Gopher - Meio de navegação através de menus. Ferramenta muito usada com a função de localizar e recuperar arquivos na Internet. O nome "gropher" é proveniente do mascote da Universidade de Minnesota, local onde o projeto foi desenvolvido, Pai do Web. GUI (Interface Gráfica ao Usuário) - Interface que une ícones e funções para realizar tarefas e facilitar a vida do usuário. Gzip - Tipo de compressão de arquivos, funciona como o usual zip.
- H - Hacker - É uma pessoa que tem prazer em conhecer profundamente o funcionamento interno dos sistemas, computadores e redes de computadores. A quebra de segurança de computadores é para Hacker apenas um desafio. Este termo geralmente é empregado de maneira pejorativa, onde o correto seria "Craker". Header (cabeçalho) - A parte de um pacote que precede os dados e que contém a fonte, o destino e o endereço, cabeçalho também é a parte de uma mensagem eletrônica que traz, entre outras coisas, o remetente, dia e hora. Hipertexto - Um tipo de texto que permite o uso de ligações (links) para outros documentos ou para partes do mesmo documento. Host - Um computador que está ligado à uma rede ou à Internet. Quando você se conecta a ele, passa a ter acesso a arquivos e informações. HTML - Hypertext Makup Language Linguagem padrão baseada em texto utilizada para escrever todos os documentos de hypertexto do World Wide Web. HTTP - Hyper Text Tranfer Protocol Protocolo de comunicação utilizado no World Wide Web. Hytelnet - Banco de dados sempre atualizado, que fornece informações sobre localidades Telnet específicas e ajuda a conectá-las.
- I -
Infobahm - O mesmo que super-rodovia de informações ou super infohighway. Internauta - Nome dado ao usuário da Internet. Internet Protocol (IP) - Protocolo de comunicação que forma a base da Internet. InterNIC - Significa "Internet Information Center". Produz dados estatísticos da Rede e também é o responsável pelo registro de um novo domínio na Internet. IP Address (Internet Protocol Address) - É a identificação numérica dos computadores definida pelo protocolo IP. Toda máquina que faz parte da Internet possui um único e exclusivo endereço IP. IRC (Internet Relay Chat) - Sistema interativo no qual os usuários da Internet podem conversar (através do teclado) em tempo real. Depois do e-mail é o serviço mais popular da Internet. Existem várias opções de canais, proporcionando maior privacidade. ISDN (Integrated Services Digital Networks) - Uma tecnologia que combina voz e serviços de redes digitais em uma mesma linha. Possibilita conexões de alta velocidade à Internet. ISOC (Internet Society) - Uma organização que estuda e estimula a evolução da Internet. O ISOC também ajuda a promover o desenvolvimento de novas aplicações, publicando notas e artigos.
- J –
Java - Considerada por muitos como a grande revolução do WWW, Java é uma linguagem de programação orientada a objetos, que permite o uso de interatividade nas páginas de Web.
- K -
K - Significa "sobre 1.000", derivado do Grego kilo. Por exemplo, 8.6K significa, aproximadamente, 8.600 caracteres.
- L - LAN (Local Area Network) - É uma rede local de computadores, que permite que os usuários troquem informações e compartilhem recursos como impressoras ou MODEMS. A grande maioria das empresas atualmente possui um LAN que também está conectada à Internet. Listas de discussões, Grupos de discussões - As discussões são carregadas nas mensagens de correio eletrônico para respostas automáticas, 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. - M - Mailbox - É a área que armazena as mensagens eletrônicas recebidas. Mailing list MIME (Multipurpose Internet Mail Extensions) - É um aperfeiçoamento dos padrões do sistema de correio da Internet, que possui a habilidade de transferir dados não textuais como gráficos, áudio e fax e permite que se envie mensagens com a acentuação em português. Mirror Site - Sites que são réplicas de outros muitos populares. O uso de "Mirror Sites" é incentivado, pois distribui melhor o tráfego na Rede. Geralmente, a escolha de um site perto de você é garantia de melhores taxas de transferência, sendo assim, procure saber se aquele super site que você sempre visita não possui um espelho no Brasil. Modem - Um dispositivo que transforma sinais analógicos em digitais 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.
- N - Net - Abreviação para Internet Netiquette (Netiqueta) - Uma combinação das palavras "Net"e "etiquette". São padrões de bom comportamento utilizados na Internet. O conceito básico da "Netiquette" é que existem pessoas reais do outro lado da máquina, sendo assim, comentários ou atitudes desagradáveis são tão ofensivos quanto se estas estivessem na sua frente.
Netscape Navigator Personal Edition - é um conjunto de softwares gráfico que conecta você a um provedor de acesso a rede Internet e lhe garante fácil acesso a Internet e ao Word Wide Web. Newbie - O mesmo que novato na Internet. Newsgroup Usenet (Netnews) - São grupos de discussões que usam software newsreader e servidores. NNTP (Network News Tranfer Protocol) - Padrão usado para a troca de mensagens dos usuários da Usenet na Internet. Nó (Node) - Um computador que está conectado a uma rede.
- O - On-line - Termo que significa estar no sistema, estar conectado a algum lugar. Daí surgem as revistas e bancos on- line.
- P –
Pacote (Packet) - Unidade padrão para representar os dados enviados pela rede. Uma informação é sempre dividida em pequenos pacotes. Paginadores - Aplicações clientes que permitem a visualização de páginas WWW. Par trançado - Cabo produzido por pares de fios de cobre trançados uns aos outros fazendo com que se cancelem os efeitos de ruídos elétricos. 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.
- S - Servidor - 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.
- T - T1, 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.
- U - Unix - 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 ([email protected]).
- V - VRML (Virtual Rality Modelling Language) - é uma linguagem de programação que permite a utilização de animações tridimensionais no WWW.
- W - WAIS (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>
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 | | +--------------------------+-------------+ <script> (roteiro) Essa tag pode ter inúmeras funções, pois no interior dela é possível trabalhar com estruturas semelhantes a programas. Entre outras funções essa tag possibilita interatividade entre o documento HTML e o usuário HTTP. Exemplo: <SCRIPT LANGUAGE="JavaScript"> NOTA: A tag <SCRIPT> não está confinada somente ao <HEAD> do documento HTML, ela pode aparecer também no interior do <BODY>. Meta-Informação Essa tag contém meta-informação ou especifica cabeçalho através de dois atributos: NAME e HTTP-EQUIV. NAME é uma informação que pode ser aproveitada por alguém que visualize o código fonte ou por ferrramentas de busca tais como Alta Vista, Infoseek ou Google. HTTP-EQUIV envia seu valor e o do atributo CONTENT para ser usado pelo servidor como HEADER (cabeçalho) do documento. Atributos: <META NAME="string"|HTTP-EQUIV="string" CONTENT="string"> Exemplo : <HEAD> <META NAME="description" CONTENT="Descrição da página"> <META NAME="keywords" CONTENT="Palavras-chave que descrevem o conteúdo da página. Robots gostam disso"> <META NAME="author" CONTENT="Nome do Autor"> <META NAME="generator" CONTENT="Criado na Unha Mesmo"> </HEAD> Exemplo:
<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):