Ctae curso-de-html-nte-ananin

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?
O que é Domínio e Hospedagem?

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.
- 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
(nome@provedor.com.br).

- 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>

<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
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>
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
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.
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
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>
<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
<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>
<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):
<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 pres-
sionar "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 ve-
remos 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 atri-
buto 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 mes-
mo 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 visita-
do, 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 clica-
do. Por exemplo, se a descrição fosse "Clique aqui para visitar a StarMedia", você coloca-
ria 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 ar-
quivo 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 pa-
ge 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 StarMe-
dia </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 recur-
sos 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 visi-
tado, 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" hei-
ght="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 visi-
tantes 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 downlo-
ad. Exemplo: Se o navegador não consegue abrir um arquivo "zip" (compactado), ele au-
tomaticamente inicia o download.
Os links normalmente são direcionados a arquivos html. Se você deseja colocar um arqui-
vo para download, tudo que você precisa fazer é direcionar o link para ele como se estives-
se colocando um link para uma página. Exemplo: Para o download de um arquivo "exem-
plo.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. A-
lé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 ca-
da 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>

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>
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, pode-
se 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 so-
bre as imagens de fundo.
A imagem de fundo é um atributo que colocamos dentro da Tag <BODY> que você apren-
deu 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 "rolan-
do" 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
Agora veja a mesma tabela sem bordas (border=0):
Coluna 1 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
3 linhas juntas
uma linha
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
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
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
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">
</FRAMESET>
<FRAMESET ROWS="20%, 80%">
<FRAME SRC="linha1.html">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</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>
<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:
Exemplo 3:
Exemplo 4:
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

Ctae curso-de-html-nte-ananin

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to Ctae curso-de-html-nte-ananin

Similar to Ctae curso-de-html-nte-ananin (20)

Ctae curso-de-html-nte-ananin