Apostila_HTML_CSS_E-Jovem 11

Prévia do material em texto

Projeto e­Jovem ­ Módulo II: HTML 1
Capítulo 1. HTML
1.1.  Introdução
Antes  de   começarmos  a  estudar  HTML,  é  necessário  que   se  entenda  alguns  princípios 
básicos que envolvem esta linguagem.
1.1.1.  Internet
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 diversos países, valores 
estes que mudam a cada dia. Sem dúvidas, não dá para ficar de fora desta teia.
Enfim, se formos definir Internet, o melhor é utilizarmos o termo comunicação, pois através 
dela encontramos serviços e facilidades; notícias e atualidades; ou ainda, como é o caso de 
muitas pessoas, um excelente local para encontrar amigos, jogos, bate papo e muito mais, 
como lojas virtuais, onde podemos comprar ou vender com toda segurança.
1.1.2.  Histórico da Internet
A  Internet   teve   início  em 1969 sob  o nome de  ARPANET (USA).  Composta  de  quatro 
computadores tinha como 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 softwares e hardwares que estabelecem comunicação entre si, a 
qual é  mantida por organizações comerciais e governamentais. Mais uma das principais 
características da Internet, é que não possui proprietário. 
Para  organizar   todas  estas   trocas  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.
1.1.3.  A Word Wide Web (WWW)
As pessoas costumam 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 (Ampla Rede Mundial) é conhecida como WWW, uma nova estrutura de 
navegação pelos diversos   itens de dados em vários computadores  diferentes.  O modelo 
WWW  trata   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.
Por isso, existem programas como o Mozilla Firefox e o Microsoft Internet Explorer que 
aumentaram muito a popularidade da Internet e graças às suas potencialidades. 
Hoje, podemos nas páginas da Internet: ver documentos formatados (cores, efeitos e etc...), 
Projeto e­Jovem ­ Módulo II: HTML 2
escutar música, assistir a vídeos, e muito mais.
Enfim, a Web é a interface gráfica da Internet, pois podemos acessá­la, transferir arquivos 
(Processo este que chamamos UpLoad) e realizar outras operações básicas, sem precisar de 
uma interface gráfica.
Para concluir, só estamos de fato usando a Web quando estamos navegando, fazendo uso 
das Home Pages para acessar um site, ou seja, um endereço único que contêm a Home Page 
(página inicial) e outras páginas que fazem parte deste conjunto de páginas e todas em um 
único código fonte escrito em uma linguagem chamada HTML.
1.1.4.   Web
Web é o diminutivo para World Wide Web. Termo esse usado originalmente para a parte da 
Internet que surgiu no início da década de 90, composta por informações dispostas em 
forma de textos, imagens e sons. É através da Web que se navega com a ajuda de Browsers. 
Antes, trocava­se basicamente mensagens. As duas redes acabaram se fundindo e hoje a 
palavra Web é usada como sinônimo da própria Internet ("Grande Rede").
1.1.5.  Hipertexto
Originalmente,   Hipertexto   é   qualquer   informação   de   texto   em   um   computador,   que 
contenha saltos (links) para outras informações.
Os documentos visualizados através dos Browsers são escritos em Hipertextos, utilizando­se 
uma linguagem especial chamada HTML (HyperText Markup Language).
Através   de  um hipertexto  podemos   “navegar”   de   forma   especial   através   de   elementos 
chamados “links”, os quais remetem para outros documentos ou para partes do mesmo 
documento.
Um documento   “não­hipertexto”  permite   somente  que  naveguemos em uma seqüência, 
percorrendo seu conteúdo para frente e para trás.
O hipertexto nas páginas da Web foi expandido para incluir hyperlinks a partir de texto, de 
uma figura, de um elemento gráfico, de mapas de imagens, som e até mesmo animações, 
sendo definido com a inserção desses novos recursos de “hipermídia”. 
Para se ter uma idéia  de hipertexto, basta visualizar o sistema de "Ajuda" do Microsoft 
Windows.
1.1.6.  Links ou Hyperlinks
Link é um ponto de acesso ou salto até um local na mesma pasta de trabalho ou em outro 
arquivo, representado por meio de texto colorido ou sublinhado, de uma figura, de um 
elemento gráfico ou de um mapa de imagens.
Você pode clicar em um link para saltar até um local onde se encontra um arquivo em seu 
sistema local, para um compartilhamento de rede na World Wide Web ou até para uma 
Intranet.
Projeto e­Jovem ­ Módulo II: HTML 3
1.1.7.  Home Page
Home Page é um conjunto de “páginas", documentos disponíveis na Web, interligados entre 
si   (através   de   links).  O   termo  Home  Page   também  é   usado   para   designar   a   "página 
principal" de um conjunto de documentos. Um conjunto de "páginas"  também é chamado 
de Site.
Alguns   Servidores   da  Web   reservam  index.htm  como   o   nome   da   home   page   (página 
principal), enquanto outros a denominam como default.htm. 
1.1.8.  Site
Palavra em inglês que significa local, lugar. Na Internet, designa um conjunto de páginas 
que representa uma pessoa, instituição ou empresa na rede.
1.1.9.  Browsers (Navegadores da Web)
Browsers   são   softwares   que   leem   e   interpretam   arquivos  HTML   (Hyper   Text  Markup 
Language) enviados para a World Wide Web, formata­os em páginas da Web e os exibe ao 
usuário.   Navegadores   da   Web   também   podem   executar   som   ou   arquivos   de   vídeo 
incorporados em documentos da Web, bastando ter disponível o hardware necessário.
Existem Browsers para todos os gostos. Os mais utilizados, o Internet Explorer e o Mozilla 
Firefox, vêm acompanhados de outros programas para Internet, como o leitor de Correio 
Eletrônico (e­mail). Existem outras opções de Browsers, basta escolher um deles e partir 
tranquilo pelos “mares" da Internet.
1.1.10.  Protocolo
Protocolo é um conjunto de regras estabelecidas com o objetivo de permitir a comunicação 
entre   computadores.  É   um método  de   acesso   a  um  documento  ou   serviço   através   da 
Internet. Dois principais protocolos usados são o File Transfer Protocol (FTP) e o Hypertext 
Transfer Protocol (HTTP).
1.1.11.  Protocolo HTTP (HyperText Transfer Protocol)
HTTP (Protocolo  de Transferência  de  Hipertexto)  é  um protocolo da   Internet  utilizado 
pelos computadores ligados à Web para se comunicarem, ativa os navegadores da Web para 
recuperarem informações de servidores da World Wide Web.
O protocolo permite a um usuário usar um programa cliente para entrar em um URL (ou 
clicar em um hyperlink) e recuperar texto, elementos gráficos, som e outras informações 
digitais de um servidor da Web.
Endereços URL de recursos HTTP começam com http://.
1.1.12.  Protocolo FTP (File Transfer Protocol)
FTP (Protocolo de Transferência de Arquivo) é um protocolo que possibilita a transferência 
de arquivos de um local para outro pela Internet.
Normalmente,   os   sites   têm  áreas   públicas   de   FTP,   permitindo   que   os   usuários   façam 
Projeto e­Jovem ­ Módulo II: HTML 4
download de programas por esse processo.
Protegido por senhas, o FTP também é utilizado para atualizar, à distância, sites localizados 
em empresas hospedeiras.
URLs de arquivos em servidores FTP começam com ftp://.
1.1.13.  URL (Uniform ResourceLocator­ Localizador de Recursos Uniforme)
Um dos principais objetivos do projeto da WWW era o desenvolvimento de um padrão de 
referência   a   um  item  independente  de   seu   tipo   (som,   filme,   imagem,   etc.).   Para   este 
objetivo foi desenvolvido a URL (Uniform Resource Locator).
URL   (Uniforme   Resource   Locator,   numa   tradução   literal,   Localizador   Uniforme   de 
Recursos) é uma seqüência de caracteres que fornece o endereço Internet de um Site da 
Web ou um recurso da World Wide Web, juntamente com o protocolo (como FTP ou HTTP), 
através do qual o site ou o recurso é acessado.
A parte inicial do URL (a que termina com os dois pontos) indica qual protocolo   Internet 
está sendo usado.
As duas barras indicam que o que vem a seguir é o endereço de um servidor válido da 
Internet ou localização simbólica. 
(www.xyz.com.br, por exemplo) ou o endereço IP do site.
1.1.13.1.  URL Absoluto 
O URL absoluto inclui um protocolo, como “http", local da rede, além de caminho e nome 
de arquivo opcionais.
Exemplo: http://www.xyz.com.br/treinamento/cursos.htm, é um URL Absoluto.
1.1.13.2.  URL Relativo 
Em uma referência relativa assume­se que a máquina e diretório do item já estão sendo 
usados   e   apenas  é   necessário   indicar   o  nome  do   arquivo  desejado   (ou  possivelmente 
subdiretório e arquivo). Um URL relativo inclui um protocolo.
Exemplo:
O   URL   relativo   Treinamento/Cursos.htm   refere­se   à   página   Cursos.htm,   na   pasta 
Treinamento, abaixo da pasta atual.
1.1.13.3.  Endereço
Endereço é o caminho até um objeto, documento, arquivo, página ou outro destino.
Um endereço pode ser um URL (Uniforme Resource Locator ­  Localizador Uniforme de 
Recursos)   ou   um   caminho   de   rede   UNC   (Universal   Naming   Convention   ­   Convenção 
Universal  para  Nomes),  o   formato  padrão para  caminhos  que   incluem um servidor  de 
arquivo de rede de área local que utiliza a sintaxe a seguir:
Exemplo: /servidor/compartilhamento/caminho/nome do arquivo
O endereço http://www.xyz.com.br indica um URL do Web Site da XYZ Informática Ltda.
Projeto e­Jovem ­ Módulo II: HTML 5
1.1.13.4.   Entendendo uma URL
http://www.xyz.com.br/treinamento/cursos.htm#local
•http://   → Protocolo ­ Protocolo da Internet utilizado pelos computadores ligados à Web 
para comunicarem­se entre si.
•www.xyz.com.br   → Nome  do  Domínio   ­  Domínio   são   as   categorias  de  endereços  da 
Internet que representam países ou tipos de organização.
•www   → Sigla de World Wide Web, significa Rede Mundial
•xyz   → Nome específico que pode conter uma ou mais palavras, separadas ou não,   por 
hifens (ex.: XYZ­informática), que simboliza, por exemplo, o nome da empresa, ou de um 
produto especifico.
•com   → Tipo de Domínio ­ Indica a natureza do Site. No caso, como trata­se de um Site de 
uma empresa privada,  ".com"  vem de comercial. Outros Exemplo: .gov (governo) e  .org 
(organizações sem fins lucrativos).
•br   → Sigla do País ­ composta de duas letras, significa que a página está situada em um 
computador no Brasil. Páginas que não possuem terminação indicando o país de origem 
estão situadas nos Estados Unidos. Outros Exemplo: .pt (Portugal) e .jp (Japão).
•treinamento   → Diretório (pasta) onde está localizado a página (arquivo) cursos.htm.
Às vezes uma URL indica apenas o diretório (ou o servidor).  Nesse caso, o servidor se 
encarrega de procurar e enviar o arquivo adequado. 
•cursos.htm   → Nome da página escrita em HTML  requerida (páginas da Web geralmente 
tem terminação em .htm  ou .html).
•#local   → Aponta para o local específico dentro da página que será exibida.
1.1.14.  Endereço IP (Endereço do Protocolo Internet)
É a maneira padrão de identificar um computador conectado à Internet, da mesma forma 
que um número de telefone identifica um telefone em uma rede telefônica. Um endereço IP 
é representado por quatro números separados por pontos e onde cada número é menor que 
256, por exemplo, 192.200.44.69. O administrador de seu servidor Web ou o provedor de 
serviços de Internet irá atribuir um endereço IP a seu computador. 
O tipo mais comum de URL é http://, que fornece o endereço Internet de uma página da 
Web. Alguns outros tipos de URL são:
•ftp://  →  que   fornece   o   local   da   rede  de  um  recurso   FTP   (este   serviço   representa   o 
protocolo de transferência de arquivo na Internet).
•gopher://   → que fornece o  endereço Internet  de um diretório gopher (representa um 
serviço não­gráfico de informações, dirigido por menus).
•news://   → grupos de discussão ou de notícias  (representa o serviço de BBS (bulletin 
board) organizado em áreas de interesse especial).
•mailto://   → para especificar um endereço de Correio Eletrônico da Internet (para enviar 
correio eletrônico).
Projeto e­Jovem ­ Módulo II: HTML 6
1.1.15.   ISP (Internet Service Provider)
1.1.15.1. Provedores
O Provedor é uma Empresa ou Organização que oferece conexão para Internet. Através de 
um Provedor podemos ter acesso à Internet e serviços de hospedagem de Site. O Provedor 
disponibiliza   as   informações   solicitadas   pelos   "navegadores"   (Browsers)   por   uma 
combinação de computador e programas que formam os servidores situados em instalações 
apropriadas.  Neste caso, o Provedor aluga espaço em um disco rígido, cuja máquina deve 
estar permanentemente conectada à rede, disponibilizando sua Home Page 24 horas por 
dia a todos os usuários da Internet.
A ligação com o provedor pode ser feita por linhas telefônicas normais (conexão discada) 
ou por linhas especiais, ligadas 24 horas por dia (conexão dedicada) e ainda, através de 
banda larga.
Um provedor  geralmente   oferece   várias   funções  de   aplicações   como  World  Wide  Web 
(http), transferência de arquivos (ftp) e gerenciamento de conteúdo (armazenamento de 
dados). A maioria dos provedores também disponibiliza caixa postal eletrônica, "contas" de 
e­mail para seus usuários, juntamente com os serviços de acesso e hospedagem.
1.1.15.2. Seu Site na Grande Rede
Ao desenvolver sua Home Page, basta transferir seus arquivos via FTP para o Provedor.
Alguns programas específicos podem facilitar o seu Upload,  já  que o Browser  funciona 
apenas para busca de arquivos, e não para o envio. O CuteFTP é um dos mais indicados 
pelos provedores, que permite um acesso totalmente gráfico e interativo a servidores FTP. 
Mas, sem dúvidas, existe um excelente, o Internet Neighborhood. Sua interface é comum ao 
do Microsoft Windows Explorer, funcionando de maneira simples, possibilitando Download 
e Upload da máquina local para o servidor FTP, transferindo arquivos de uma pasta para 
outra.
1.1.15.3. Login
•Acesso   → É o processo de identificar­se ao entrar num computador ou em uma rede de 
computadores. A cada entrada na  Internet, você se  "loga" (faz o login)  em seu  Provedor, 
colocando nome (username) e senha (password).
1.2.  Introdução à Linguagem HTML
Originado   do   casamento   dos   padrões   HyTime   (Hypermedia/Time­based   Doumnt 
Structuring Language) e SGML (Standard Generalized Markup Language), o HTML, sigla 
para HyperText Markup Language (Linguagem de Formatação de Hipertexto), linguagem 
usada para criar  páginas na Web,  estabelece como um determinado elemento deve ser 
visualizado, não sendo portanto uma linguagem de programação, e sim, uma linguagem de 
formatação de exibição de textos, através de "comandos" conhecidos como TAGs. Em suma, 
HTML é empregado para definir as funções dos diferentes elementos das páginas, como: 
textos, fotos ou animações, que serão visualizadas pelo programa de navegação (Browser).
Projeto e­Jovem ­ Módulo II: HTML 7
1.2.1.  HyTime (Hyprmedia/Time­based Document Structuring Language)
HyTime (ISO 10744:1992) é  o  padrão para  representação estruturada de hipermídia e 
informação  baseada  em  tempo.  Um documento  é   visto   como um conjunto  de  eventos 
concorrentes   dependentes   de   tempo   (áudio,   vídeo,   etc.),conectados   por   webs   ou 
hiperlinks.
O padrão HyTime é   independente dos padrões e processamento de texto em geral.  Ele 
fornece  a  base  para  a   construção  de   sistemas  hipertexto  padronizados,   consistindo  de 
documentos que aplicam os padrões de maneira particular.
1.2.2.  SGML (Standard Generalized Marup Language)
Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna­
se conveniente para transformar documentos em hiper­objetos e para descrever as ligações. 
SGML não é aplicado de maneira padronizada: todos os produtos SGML tem seu próprio 
sistema para traduzir as etiquetas para um particular formatador de texto.ssa, sendo esta 
uma postura que deve ser tomada.
O documento HTML pode ser escrito em qualquer editor de textos, desde que este tenha a 
capacidade  de   gravá­lo   como   código  ASCII   (American   Standard  Code   for   Information 
Interchange   ­   código   utilizado   para   representar   textos   quando   há   computadores 
envolvidos), isto é, como texto puro, sem formatação ou caracteres de controle. Pode­se 
usar,  portanto, o gedit,  kate,  kedit  nas distribuições  linux, ou o Notepad, do Windows. 
Pode­se também usar editores mais modernos, como o BrOffice Writer ou o Word, sendo 
necessário neste caso, que o documento seja gravado no formato texto, e não, como um 
''.odt" normal do BrOffice Writer ou “.doc" normal do MS­Word.
1.2.3.  Conjunto de caracteres ASCII
O conjunto  de   caracteres   de  7   bits   do   código  padrão   americano  para   intercâmbio  de 
informações   (ASCII,   American   Standard   Code   for   Information   Interchange)   e   que   é 
amplamente   usado   para   representar   letras   e   símbolos   encontrados   em   um   teclado 
americano padrão. O conjunto de caracteres ASCII é   igual aos 128 primeiros caracteres 
(0127) do conjunto de caracteres ANSI.
1.2.4.  Conjunto de caracteres ANSI
O conjunto  de   caracteres   de  8  bits,  do   Instituto  Nacional  de  Padronização  Americano 
(ANSI, American National Standards Institute), que é usado pelo Microsoft Windows e que 
possibilita   a   representação  de   até   256   caracteres   (0­255),   através   do   teclado.  Os  128 
primeiros caracteres (0­127) correspondem a letras e símbolos de um teclado americano 
padrão. Os outros 128 caracteres (128­255) representam caracteres especiais, como letras 
de alfabetos internacionais, acentos, símbolos monetários e frações.
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 
Projeto e­Jovem ­ Módulo II: HTML 8
possuem um código fonte escrito numa linguagem chamada HTML (Hyper Text Markup 
Language).
Este manual 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”.  Portanto, deveremos salvar nossos exercícios com esta 
extensão.
Já que entendemos melhor como funciona a internet em geral, daremos inicio ao curso de 
HTML. 
Todo documento HTML apresenta elementos entre parênteses angulares (< e >). Esses 
elementos   são   as   etiquetas   (tags)   de  HTML,   que   são  os   comandos   de   formatação  da 
linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada 
com uma “barra” ( / ):
Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de 
texto,   e   assim   marcamos   onde   começa   e   onde   termina   o   texto   com   a   formatação 
especificada  por   ela.  Alguns   elementos   são   chamados   “vazios”,   pois  não  marcam uma 
região de texto, apenas inserem alguma coisa no documento, não havendo a necessidade 
do fechamento:
Todos os elementos podem ter atributos:
HTML é  um recurso muito  simples  e  acessível  para a  produção de  documentos.  Nesta 
apostila, será possível aprender grande parte de seus elementos.
Nota: Não existem programas em HTML, pois HTML não é uma linguagem de 
programação, mas de formatação (marcação). Portanto, a rigor, não existem 
"programadores" de HTML.
1.3.  Edição de Documentos HTML
Existem Editores HTML chamados WYSIWYG (what you see is what you get ­ o que você vê 
é o que você tem). Eles oferecem ambiente de edição com um resultado final das marcações 
(pois o resultado final depende do browser1 usado para visitar a página). Alguns bastante 
conhecidos são, por exemplo: FrontPage e Dreamweaver.
Além dos editores específicos para HTML, Editores de Textos bastante utilizados, como o 
Word, entre outros, permitem a exportação de seus documentos próprios para o formato 
HTML (menu Arquivo, Salvar como, Salvar_como Tipo).
Um documento HTML, como dito anteriormente, normalmente terá extensão .html. Porém, 
poderão também estar no formato .htm.
Gostaria de lembrar, como citei na linha acima, que existem vários editores de Home Pages, 
como por exemplo: o Front Page Express, Netscape Composer, Home Site, etc. Só que na 
Projeto e­Jovem ­ Módulo II: HTML 9
ausência destes aplicativos e sendo desconhecida a Linguagem de HyperTextos, HTML, não 
poderia criar suas páginas. Daí, a importância de se conhecer esta linguagem. 
Para estudarmos HTML, usaremos editores de texto simples, como: gedit, kate ou Bloco de 
Notas. Precisaremos também de um Browser (Mozilla Firefox ou Internet Explorer) para 
que possamos visualizar como nossa página está ficando. Para nossos exemplos, usarei o 
Mozilla Firefox. Tudo Bem? Mas antes, vamos entender como estas páginas são colocadas 
para que todos possam ver na Web.
1.4.  Publicação de Documentos na Internet (Sites)
Para que uma página esteja  permanentemente  disponível  pela  Web,  ela  precisa   ter  um 
endereço fixo, alojada em um servidor.
Existem vários provedores de espaço (hosting) gratuitos e também os provedores de acesso 
geralmente  oferecem espaço para  os   sites  de  seus  assinantes.  Sites  com fins   lucrativos 
geralmente são hospedados em provedores de espaço pagos.
Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP2 ou 
por   uma   página   de   envio   no   próprio   provedor   de   espaço)   e   suas   páginas   já   estarão 
disponíveis para visitas no mundo todo.
Já tendo uma idéia dos principais conceitos, vamos começar a produzir nossas páginas.
1.5.  Documento HTML Básico e seus Componentes
A estrutura básica de uma página HTML é mostrada na abaixo. Observe que a construção 
de páginas exige o uso das TAGS: 
Com   certeza,   você   observou   melhor   o   que   foi   dito   anteriormente,   que   as   TAGs 
normalmente estarão antes e depois de algo, onde este algo pode ser algum texto, ou outro 
conjunto de TAGs que estão entre estas duas TAGS.
As etiquetas (tags) HTML não são case sensitive, ou seja, as TAGS não fazem diferença 
entre   letras   maiúsculas   ou   minúsculas.   Tanto   faz   escrever,   por   exemplo,   <HTML>, 
<Html>, <html>, <HtMl>, etc. 
Onde :
Principais TAG's
<html> Marca o início e fim do documento
<head> Marca o início e o fim do cabeçalho 
<title> Marca o inicio e o fim do título
<body> Marca o início e o fim do do corpo da página
Projeto e­Jovem ­ Módulo II: HTML 10
O documento HTML básico divide­se, principalmente, em duas TAGS principais das vistas 
acima, sendo elas: <HEAD> e <BODY>.
1.5.1.  <HEAD>
Esta TAG contém informações sobre o documento. O elemento <TITLE>, por exemplo, 
define um título, que é mostrado no alto da janela do browser. 
Exemplo:
Todo documento WWW deve ter um título, onde principalmente esse título é referenciado 
em buscas pela rede, dandouma identidade ao documento. 
Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a 
âncora de atalho para ela. Portanto, este é um dos motivos pelo qual se sugere que, ao dar 
um título a uma página ele seja sugestivo, evitando­se títulos genéricos, como "Introdução", 
por exemplo. O título também é bastante significativo para a listagem de uma página nos 
resultados de pesquisas nos sites de busca da Internet.
1.5.2.   <BODY>
Tudo que estiver contido em <BODY> (Corpo do Texto) será mostrado na janela principal 
do browser,  sendo apresentado ao  leitor.  No corpo do  texto pode conter,  por  exemplo: 
imagens, vídeos, sons, cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, 
formulários, animações, entre outros.
Exercício 1:
Com o que foi visto até agora, vamos criar uma página HTML simples.
•Passo   1:  Abrir   o   Ambiente   de   Desenvolvimento   WEB   (Iniciar>Desenvolvimento 
WEB>Quanta Plus)
•Passo 2: Digite o código exatamente como está abaixo:
Passo 3:  Após digitá­lo, salvar em uma pasta (Crie uma pasta no computador com seu 
nome,  e  dentro  dela  outra  pasta   com o  nome “Minhas  páginas  HTML”   )  com o nome 
“Minha_primeira_página.html”
Como salvar:
Para Salvar, é simples: Basta primeiramente clicar no menu: Arquivo   Salvar→ . Localiza­se 
onde está sua pasta e é só salvar quando estiver dento de “Minhas páginas HTML”
Projeto e­Jovem ­ Módulo II: HTML 11
Para  ver   o   resultado  deste   exemplo,   abra  o   arquivo   com o  Mozilla  Firefox  ou   com o 
Konqueror. 
Perceba que existe uma parte do texto que não é mostrada e que existe um texto após a tag 
title: “<!­­Título do Documento­­>”. Isto é um comentário e não será mostrado na página.
Poderão existir,  dentro  de  cada  tag,  atributos  para   implementar.  Veremos  então abaixo 
alguns destes atributos da TAG <BODY>.
1.5.2.1.  Atributos de <BODY>
Dentro da TAG <BODY> é possível ter vários atributos e podemos defini­los, por exemplo, 
as cores: para os textos, links e para o fundo das páginas, bem como uma imagem de fundo 
(marca d’água):
Onde:
Atributos da TAG <BODY>
BGCOLOR
Background Color (ou cor de fundo da página). A cor padrão é 
branca.
TEXT Cor dos textos da página (padrão: preto).
LINK Cor dos links (padrão: azul).
ALINK Cor dos links quando acionados, clicados (padrão: vermelho).
VLINK Cor dos links depois de visitados (padrão: azul escuro ou roxo).
BACKGROUND Caminho para a figura de fundo.
Na TAG <BODY> acima, percebemos que, por exemplo, no bgcolor temos “#rrggbb”. Seus 
valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). 
Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma 
interface   bem   amigável   através   da   qual   escolhemos   as   cores   desejadas,   sem   nos 
preocuparmos com números esdrúxulos, tais como #FF80A0. 
Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de 
cores,   tirados   da   paleta   VGA   do   Windows   ­   por   exemplo,   podemos   escrever: 
BGCOLOR="BLUE".
Projeto e­Jovem ­ Módulo II: HTML 12
Porém, browsers mais antigos não apresentarão as cores indicadas.
BACKGROUND: Indica a URL da imagem a ser replicada no fundo da página, como uma 
marca imagem de fundo.
O significado do link, alink e vlink, não serão discutidos agora, mas estas TAGS servirão 
para o uso de links, ou seja, atalho para outras páginas, o que será visto posteriormente. 
Nota: Os 16 nomes de cores aceitos desde a versão 3.2 da HTML são estes: aqua, 
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, 
teal, white, yellow.
Exercício 2:
Abra novamente o editor de texto e digite o código abaixo:
Salve com o nome “segunda_pagina.html”
O  resultado  da  página  poderá   ser   feito  no  próprio  programa ou   como visualizamos  o 
primeiro   exercício.  Para  visualizar  pelo  programa,   clique  no   ícone  em destaque,   como 
mostrado na imagem abaixo:
Agora, vamos Visualizar pelo Konqueror, como foi visualizado o primeiro exercício. Veja o 
resultado:
Projeto e­Jovem ­ Módulo II: HTML 13
Opa! Aconteceu algo errado! Os acentos viraram caracteres malucos?
Bom, é  preciso falar para o navegador qual codificação ele está  usando. Para que nosso 
texto   seja   mostrado   normalmente,   iremos   criar   uma   nova   página   e   colocar   nossas 
informações nela para sair corretamente.
Primeiramente, vamos criar um novo arquivo:
Clique no ícone Kommander Quick Start Dialog (Figura abaixo).
Irá   abrir   uma   janela   (Imagem ao   lado).  Como 
apresentado nela, desmarque as opções “Mostrar 
DTD”   e   “Meta  Quanta”.   Confirme   clicando   em 
“OK”, após estas alterações.
Aparecerá   um documento  com a  estrutura  que 
vimos anteriormente, mas com uma novidade, a 
TAG
Não é preciso entendermos a fundo sobre esta TAG agora, pois o importante é saber que ela 
resolverá nosso problema.
Agora, com esta estrutura montada, percebamos que no rodapé da página existe a página 
que salvamos este novo documento.
Com base nisso, clique em Segunda_página.html e copie o que está dentro da tag <title> e 
o que está dentro da tag <body>, e faça alteração no texto, como mostra a figura abaixo:
Salve como “Segunda_página_modificada.html”, e volte para ver como ficou esta página.
Viu a diferença?  
Projeto e­Jovem ­ Módulo II: HTML 14
Concordo que é  muito chato ficar toda vez digitando todo o código principal. Sabemos 
então   que,   para   nossa   página   sair  mais   interessante,   o   uso   da   TAG  <meta>   para   a 
codificação é muito importante. Portanto, vamos criar um novo documento, como feito no 
exemplo anterior, e vamos fazer o Exercício 3, já que ela nos dá a estrutura principal da 
nossa página.
Exercício 3:
Algumas vezes é melhor colocar na nossa página uma imagem de fundo, no lugar de uma 
cor de fundo, não acha? Então, que tal agora colocar uma imagem, ao invés da   cor de 
fundo?
Vamos digitar o arquivo para depois explicar como colocar a imagem. Deixe o seu arquivo, 
como mostra abaixo: 
Agora,   teremos que  ir  buscar  na  internet  alguma imagem para colocar  como plano de 
fundo.
Que tal escolher uma imagem no Firefox, por exemplo? 
Após escolhida a imagem, salve­a dentro da pasta que estarão nossas páginas HTML, no 
nosso caso, dentro de “Minhas Páginas HTML”. Escolhemos a imagem com o nome “firefox­
wallpaper.jpg”.
Portanto, colocaremos, do mesmo jeito que salvamos, o nome do arquivo dentro da TAG 
<body>, como mostra abaixo:
Salve   com   o   nome   “Segunda_pagina_com_background.html”,   e   faça   a   visualização 
novamente. Veja o resultado:
Projeto e­Jovem ­ Módulo II: HTML 15
Nota: Deve­se ter cuidado na hora de escolher o tipo de plano de fundo ou cor de 
fundo, pois, por exemplo, se neste caso tivessemos usado um plano de fundo com 
cor mais clara, provavelmente ficaria difícil enxergar as letras do texto.
É importante que mesmo que sua página tenha uma imagem de fundo, ela 
também tenha uma cor de fundo. Sempre coloque uma cor de fundo parecida 
com o do plano de fundo, pois pode ser que por algum motivo a imagem não seja 
carregada. Então, o Leitor da sua página poderá ainda sim, mesmo não 
visualizando a imagem, ver o texto escrito.
1.6.  Cabeçalho (Títulos) <Hn></Hn>
Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:
Esses cabeçalhos são mostrados no browser da seguinte forma:
Exercício 4:
Vamos   agora   utilizar   a   página   do   exercício   3,   salvando­a   como 
“Pagina_com_cabeçalho.html”.  Observe abaixo e faça as alterações necessárias:
Salve  novamente,  mas   como   a   página   já   tem  um nome,  é   necessário   só   atualizar   as 
alterações.
A seguir, vamos ver algo mais sobre os cabeçalhos.
Projeto e­Jovem ­ Módulo II: HTML 16
Aninhamento de cabeçalhos 
Os   cabeçalhos   não   podem   ser   aninhados   (Colocados   um   dentro   do   outro),   pois   a 
formatação pode produzir algum resultado próximoao desejado. Observe abaixo o código 
e, logo em seguida, como ficou:
Mas o mais comum é que os browsers "entendam" essa formatação como sendo:
Ou seja, como se estivesse faltando uma etiqueta de fechamento de <h2> antes de <h1> 
e faltando uma abertura de <h2> depois do fechamento de <h1>, oferecendo o seguinte 
resultado:
Os editores WYSIWYG naturalmente não permitem o aninhamento de cabeçalhos.
Alinhamento de cabeçalhos
Os cabeçalhos têm atributos de alinhamento:
Como resultado:
1.7.  Fonte <FONT></FONT>
Até agora, construímos uma página relativamente simples. Percebemos então que o texto 
todo ficou de uma cor só até o momento. Mas será que a página só poderá ficar assim? Não 
poderíamos codificar o tipo de fonte, nem o tamanho, muito menos a cor?
Claro que isso é possível! E é para isso que serve a TAG <FONT>
Para utilizar as mudanças acima, devemos complementar a TAG <FONT> com os seus 
atributos, como por exemplo:
Projeto e­Jovem ­ Módulo II: HTML 17
Onde: 
Artibuotos da TAG <FONT>
SIZE
Determina o tamanho da fonte. Esta opção especifica o tamanho da fonte 
utilizada;
FACE
Determina o tipo de fonte que será usado. Se nenhuma fonte for colocada, será 
usada a fonte padrão. Esta opção permite que seja definida uma fonte diferente 
para o texto;
COLOR
Determina a cor da forte. Esta opção especifica a cor do texto. Seu valor pode 
ser especificado pelo código hexadecimal ou, para algumas cores, pelo seu 
nome em inglês (blue, black, white etc.).
Abaixo, vemos a diferença das duas TAGs citadas acima:
Veremos um pouco sobre cada um dos atributos, começando pelo tamanho.
A TAG acima produzirá a palavra “Texto” com o tamanho numero 3(tamanho padrão).
Este comando permite que o autor do documento altere o tamanho das letras em trechos 
específicos de texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar tamanhos 
relativos a esse, por exemplo:
Digite os exemplos e veja a diferença entre eles. 
Para a seleção das fontes, usaremos o atributo FACE:
Digite e veja o resultado. Descubra as outras fontes que existem e faça o texto também.
As cores são introduzidas também através do elemento <FONT> quando queremos que 
alguma parte do texto fique diferente da forma padrão, ou da que foi definida na TAG 
<BODY>. Usa­se também o sistema RGB, para cores (da mesma forma que vimos para 
cores anteriormente), como mostrado no exemplo a seguir:
Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita 
através dos atributos de <BODY>.
Mais exemplos:
Projeto e­Jovem ­ Módulo II: HTML 18
Perceba,   como   foi   dito   anteriormente,   que   tanto   faz   colocar   em   letras  maiúsculas   ou 
minúsculas, pois o navegador vai interpretar corretamente.
1.8.  Estilos de texto
Até agora vimos a estrutura principal do HTML, como modificar a cor de todo o texto, como 
colocar um plano e fundo e como alterar partes do texto, mas e se quisermos colocar, por 
exemplo, uma palavra em negrito e sublinhado, como o título? Sim, isso é possível, por isso 
vamos estudar os estilos.
Estilos Físicos
<B> Negrito
<I> Itálico
<U> Sublinhado. 
<STRIKE> ou 
<S>
Frase riscada.
<BIG> Fonte um pouco maior.
<SMALL> Fonte um pouco menor.
<SUB> Frase em estilo índice, como em H2O, por exemplo.
<SUP> Frase em estilo expoente, como em Km2, por exemplo.
Outras TAGs  de formatação
Temos outras TAGs que, dependendo no Navegador, podem ou não funcionar corretamente:
HTML oferece outras TAGs para formatação:
Outras TAGs de Formatação
<PRE> Apresenta o texto na mesma maneira em que foi digitado, 
mantendo quebras de linha e tabulações
<BLOCKQUOTE> É usado para citações longas
<ADDRESS> Usado para formatar endereços de E­Mail e referências a autores de 
documentos, como por exemplo:
<CODE>. Utilizada para relacionar o código­fonte de programas. Geralmente 
será visualizado em fonte
monoespaçada.
<STRONG> Utilizada para dar ênfase especial a um trecho de texto. 
Geralmente será visualizado em fonte
<DFN> Utilizada para destacar um definição. Geralmente será visualizado 
em fonte  itálica.
<EM> Utilizado para sublinhar parte do texto
<CENTER> Utilizada para centralizar um texto na tela.
A   TAG  <PRE>   permite   criar   textos   pré­formatados,   semelhantes   aos   produzidos   em 
editores   de   texto.   Espaços   em   branco,   marcas   de   tabulação   e   quebras   de   linha   são 
reconhecidos e colocados nos respectivos pontos de inserção. Textos pré­formatados são 
representados pela fonte mono espaçada, definida pelo usuário.
Uma  vez   que  <PRE> mantém o   texto  original,   não   se  deve   forçar   espaços   com essa 
marcação dentro de outra marcação que já apresente tabulações e espaços específicos.
Dentro de um texto pré­formatado:
Projeto e­Jovem ­ Módulo II: HTML 19
• É   permitido   utilizar   links   e  âncoras.   Entretanto,   não   existe   certeza   de   como   o 
browser interpretará essas marcações.
• A TAG <P> não deve ser utilizado.
• Não devem ser usados outros comandos de formatação, tais como os de listas e de 
cabeçalhos.
Observe abaixo:
Que resultaria na seguinte representação na tela:
A Tag <ADDRESS> formata informações, tais como: o endereço, a assinatura e a autoria 
de  quem publicou  a  página.  Normalmente,   estes  dados   são  colocados  no   final  de  um 
documento e, geralmente, serão visualizados em itálico. Exemplo:
O resultado seria:
Projeto e­Jovem ­ Módulo II: HTML 20
Exercício 5: 
Produza uma página utilizando os conhecimentos adquiridos até agora.  Faça uma página 
com se fosse um currículo seu, colocando alguns dados pessoais:  o que gosta (Tipo de 
música, por exemplo). Chame­a de “meus_dados.html”.
1.9.  Parágrafo <P>
Para separar blocos de texto, usamos o elemento <P>, por exemplo:
que produz o seguinte:
Combinando parágrafos e quebras de linhas (Veremos em breve), temos por exemplo:
O resultado da marcação acima é:
A TAG <P> tem atributo de alinhamento semelhante aos cabeçalhos, como nos exemplos a 
seguir:
               
Como vimos anteriormente, podemos também alinhar à  esquerda (align=left), que já  é 
padrão e também à direita (align=right).
Exercício 6: 
Pegue a página“meus_dados.html”e implemente com estes conhecimentos de parágrafos. 
Salve a página, antes de modificar, como “meus_dados_modificados.html”
Projeto e­Jovem ­ Módulo II: HTML 21
1.10.  Quebra de linha <BR>
Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando 
queremos uma quebra de linha em determinado ponto, pois os browsers já  quebram as 
linhas automaticamente para apresentar os textos.
Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse 
elemento   tem   um   atributo   especial,   que   será   apresentado   no   item   sobre   inserção   de 
imagens.
1.11.  Linhas horizontais <HR>
A   TAG   <HR>   insere   uma   linha   horizontal   que   tem   diversos   atributos,   oferecendo 
resultados diversos.
Exercício 7: 
Para   exercitar,   através   do   “meus_dados_modificados.html”,   implemente   as   linhas 
horizontais da melhor forma possível.            
1.12.  HiperTexto (Hyperlink)<A>
Agora, teremos a oportunidade de interligar todas as nossas páginas através dos hyperlinks.
Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro 
documento (ou a outra parte do próprio documento). Você já deve ter visto em alguma 
página internet exemplos dessas ligações: o browser destaca essas regiões e imagens do 
texto,   indicando que são  ligações de hipertexto  ­   também chamadas hypertext   links ou 
hiperlinks, ou simplesmente links, onde normalmente, o mouse vira uma “mãozinha” e, ao 
clicar “chamamos” (abrimos) um outro documento, página web ou figura por exemplo.
Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:
Onde:
• arquivo_destino    → é o endereço do documento de destino, da página ou imagem 
que queremos abrir.
• âncora   → é  o texto ou imagem que servirá  deligação hipertexto do documento, 
sendo apresentado para o documento de destino.
Atributos
A TAG <A> tem vários atributos que são utilizados de acordo com a ação associada ao link. 
Os mais usados são apresentados a seguir:
HREF Indica o arquivo de destino da ligação de hipertexto.
TARGET Indica o frame em que será carregado o arquivo_destino. Maiores detalhes na 
seção sobre frames.
NAME
Marca um indicador, isto é, uma região de um documento como destino de 
uma ligação.
Projeto e­Jovem ­ Módulo II: HTML 22
1.12.1.  Caminhos (uso de Links)
Os links podem estar indicados como caminhos relativos ou absolutos.
1.12.2.  Caminho Relativo
O caminho relativo pode ser usado sempre que queremos fazer referência a um documento 
armazenado no mesmo servidor do documento atual.
Através   do   campo   de   endereços   do   browser,   é   possível   identificar   se   um   documento 
(página) que está   sendo visualizado está  dentro de algum diretório (pasta).  Como, por 
exemplo, se estivermos em um browser acessando a página da FACCAT e vemos o seguinte 
endereço:   http://www.faccat.br/apostilas/apostila_de_informatica.html.   O   que   podemos 
concluir   é   que   o   documento   que   está   sendo   visualizado   no   momento,   chamado 
apostila_de_informatica.html,   está   localizado   dentro   de   um   diretório   (pasta)   chamado 
apostilas do servidor www.faccat.br.
Então, para escrevermos um link deste documento (apostila_de_informatica.html) para um 
documento chamado (doc.html), que está localizado no diretório /apostilas/documentos/, 
do mesmo servidor (www.faccat.br), tudo que precisamos fazer é escrever:
<A HREF="documentos/doc.html"> Exemplo de Caminho Relativo </A>
Para   usar   links   com   caminhos   relativos   é   preciso,   portanto,   conhecer   a   estrutura   do 
diretório do servidor no qual estamos trabalhando, pois devemos indicar todo o caminho 
onde está o documento a que estamos nos referindo no link. Quando há alguma dúvida, o 
melhor é usar o caminho absoluto.
1.12.3.  Caminho Absoluto
Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em 
outro servidor, por exemplo:
<A HREF="http://www.faccat.br"> FACCAT ­ Faculdades de Taquara </A>
Que oferece um link FACCAT ­ Faculdades de Taquara que ao ser clicado com o mouse 
abrirá a página, cujo endereço é: http://www.faccat.br.
Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações da 
Internet.
1.12.4.  Indicadores (uso de Links)
Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento 
como ponto de chegada de uma ligação hipertexto.
A formatação:
<A NAME="inicio"> Indicadores (uso de links) </A> faz com que a âncora Indicadores 
(uso de links) seja o destino de um link.
Se escrevermos:
<A HREF="#inicio"> Topo do Documento </A> , teremos uma ligação hipertexto para 
um trecho deste mesmo documento.
Projeto e­Jovem ­ Módulo II: HTML 23
Exercício 8: 
Vamos   agora   treinar   os   indicadores.   Vamos   fazer   uma   página   sobre   as   ferramentas 
estudadas até aqui.   Ou seja, elabore um pequeno texto sobre: Inkscape, Gimp, BrOffice. 
Faça no início da página um link para cada um dos conteúdos. E em cada conteúdo, dê a 
opção para ir ao topo. Veja como vai funcionar isso. Salve como “Ferramentas_Livres”
Exercício 9:
Agora, vamos criar links entre suas páginas criadas. Crie uma página chamada “index.html” 
com os links de todas as páginas criadas até agora. Se preferir (o que é importante), em 
cada página crie os mesmos links para o acesso mais rápido.
1.13.  Lista de caracteres
HTML permite  que  caracteres  especiais   sejam representados  por   sequências  de  escape, 
indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente 
ao caractere desejado, e um ; final. 
Quatro caracteres ASCII ­ <, >, e & têm significados especiais em HTML, e são usados 
dentro de documentos, seguindo a correspondência: 
1.13.1.  Caracteres Acentuados no Português e especiais
á &aacute; Á &Aacute; ã &atilde; Ã &Atilde;
â &acirc; Â &Acirc; à &agrave; À &Agrave;
é &eacute; É &Eacute; ê &ecirc; Ê &Ecirc;
í &iacute; Í &Iacute; ó &oacute; Ó &Oacute;
õ &otilde; Õ &Otilde; ô &ocirc; Ô &Ocirc;
ú &uacute; Ú &Uacute; ü &uuml; Ü &Uuml;
ç &ccedil; Ç &Ccedil;
1.13.2.  Caracteres Especiais
“ e ” aspas duplas &ldquo; e &rdquo; ♠ espadas &spades;
‘ e ’ aspas simples  &lsquo; e &rsquo; ♣ paus &clubs;
‹ e › aspas angulares simples  &lsaquo; e &rsaquo; º ordenal masculino &ordm;
« e » aspas angulares duplas &laquo; e &raquo; ª ordinal feminino &ordf;
  espaço &nbsp; – travessão ‘en’ &ndash;
& e comercial &amp; —travessão ‘em’ &mdash;
> maior que &gt; hífen oculto &shy;
< menor que &lt; ˉ macron &macr;
ˆ acento circunflexo &circ; …reticências &hellip;
˜ acento til &tilde; ¦ barra vertical &brvbar;
¨ acento trema &uml; • marcador (bullet) &bull;
´ acento agudo &cute; ¶ parágrafo &para;
¸ cedilha &cedil; ♥ copas &hearts;
" aspas duplas &quot; ♦ ouros &diams;
§ parágrafo legal &sect;
Projeto e­Jovem ­ Módulo II: HTML 24
1.13.3.  Caracteres Comerciais
© copyright &copy; ¢ centavo &cent;
® marca registrada &reg € euro &euro;
™ trade mark &trade; ¥ iene (yen) &yen;
£ libra esterlina &pound; ¤ símbolo monetário &curren;
1.13.4.  Caracteres Matemáticos e Lógicos
¹ elevado a um &sup1; ± mais ou menos &plusmn;
² ao quadrado &sup2; − sinal de subtração &minus;
³ ao cubo &sup3; × sinal de multiplicação &times;
½ um meio &frac12; ÷ sinal de divisão &divide;
¼ um quarto &frac14; ∗ Asterisco &lowast;
¾ três quartos &frac34;  ∕ barra de fração &frasl;
> maior que &gt; ‰ por­mil &permil;
< menor que &lt; ∫ sinal de integral &int;
∑ somatório &sum; ≠ Diferente &ne;
∏ PI &prod; ≤ menor ou igual &le;
√ raiz quadrada &radic; ≥ maior ou igual &ge;
∞ infinito &infin; ∴ consequentemente &there4;
≈ quase igual &asymp; ⋅ Ponto &sdot;
≅ Aprox. igual &cong; ∙ ponto do meio &middot;
∝ proporcional &prop; ∂ diferença parcial &part;
≡ idêntico &equiv; ℑ parte imaginária do número&image;
ℜ parte real do número &real; ″ segundo &Prime;
′ minuto &prime; ° grau &deg;
∠ Ângulo &ang; ∈ elemento de/pertence a &isin;
⊥ perpendicular &perp; ∉ nã é elemento de &notin;
∇ Nabla &nabla; ∩ Interseção &cap;
⊕ soma direta &oplus; ∪ União &cup;
⊗ produto de vetor &otimes; ⊂ subconjunto de &sub;
ℵ Alef &alefsym; ⊃ superconjunto de &sup;
ø produto vazio &oslash; ⊆ subconjunto de ou igual a &sube;
Ø produto vazio &Oslash; ⊇ superconjunto de ou igual a &supe;
∃ existe &exist;  ↑ e ↓ setas simples &uarr; e &darr;
∀ qualquer &forall; ↔ seta simples &harr;
∅ vazio &empty; ⇐ e ⇒ setas duplas &lArr; e &hrrr;
¬ não lógico &not; ⇑ e ⇓ setas duplas &uArr; e &dArr;
∧ e lógico &and; ⇔ seta dupla &hArr;
∨ ou lógico &or; ⌈ e ⌉ teto (esquerdo e direito) &lceil; e &rceil;
Projeto e­Jovem ­ Módulo II: HTML 25
↵ retorno de carro &crarr; ⌊ e ⌋ piso (esquerdo e direito) &lfloor; e &rfloor;
 ← e → setas simples &larr; e 
&rarr;
◊ losango &loz;
1.13.5.  Outros Acentos e Caracteres Especiais
ñ &ntilde; Ñ &Ntilde; ¡ &iexcl; ¿ &iquest;
ä &auml; Ä &Auml; å &aring; Å &Aring;
ë &euml; Ë &Euml; è &grave; È &Egrave;
ï &iuml; Ï &Iuml; ì &igrave; Ì &Igrave;
î &icirc; Î &Icirc; ò &ograve; Ò &Ograve;
ö &ouml; Ö &Ouml; û &ucirc; Û &Ucirc;
ù &ugrave; Ù &Ugrave; ÿ &yuml; Ÿ &Yuml;
ý &yacute; Ý &Yacute; œ &oelig; Œ &OElig;
æ &aelig; Æ &AElig; š &scaron; Š &Scaron;
† &dagger; ‡ &Dagger; ð &eth; Ð &ETH;
þ &thorn; Þ &THORN; ß &szlig; µ &micro;
§ &sect; ƒ &fnof;
1.13.6.  Caracteres Gregos
α &alpha; Α &Alpha; β &beta; Β &Beta;
δ &delta; Δ &Delta; ε &epsilon; Ε &Epsilon;
η &eta; Η &Eta; θ &theta; Θ &Theta;
κ &kappa; Κ &Kappa; λ &lambda; Λ &Lambda;
ν &nu; Ν &Nu; ξ &xi; Ξ &Xi;
π &pi; Π &Pi; ρ &rho; Ρ &Rho;
ς &sigmaf; τ &tau; Τ &Tau; υ &upsilon;
Φ &Phi; χ &chi; Χ &Chi; ψ &psi;
Ω &Omega; ϑ &thetasym; ϒ &upsih; ϖ &piv;
γ &gamma; Γ &Gamma; ο &omicron; Ο &Omicron;
ζ &zeta; Ζ &Zeta; σ &sigma; Σ &Sigma;
ι &iota; Ι &Iota; Υ &Upsilon; φ &phi;
μ &mu; Μ &Mu; Ψ &Psi; ω &omega;
Projeto e­Jovem­ Módulo II: HTML 26
1.14.  Tabela de Cores Hexadecimal
1.15.  Imagens<IMG>
A TAG <IMG>  insere   imagens  que   são  apresentadas   junto   com os   textos.  E   segue   a 
seguinte forma:
Um atributo SRC deve estar presente, onde URL_imagem é o URL do arquivo que contém a 
imagem que se quer inserir.   Pode ser referenciada uma imagem que esteja em um outro 
servidor (o que, logicamente, não é conveniente).
Projeto e­Jovem ­ Módulo II: HTML 27
Assim, escrevendo:
<IMG SRC = "nome_da_figura.extensão">
ou, se ela estiver dentro de uma pasta no mesmo servidor:
<IMG SRC = "nome_da_pasta/nome_da_figura.extensão">
Por exemplo, se quisermos inserir na página uma imagem chamada arvore.gif localizada no 
mesmo servidor e na mesma pasta, a tag seria assim:
<IMG SRC = "arvore.gif">
As imagens usadas na Web, normalmente são armazenadas em arquivos com as seguintes 
extensões: .gif, .jpg (ou .jpeg), .png, .bmp.
Atributos Básicos de Imagem:
ALT
Indica um texto alternativo, descrevendo brevemente a imagem, que é 
apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o 
carregamento de imagens em browsers gráficos. É recomendável que esteja 
sempre presente. Também aparecerá ao “passar o mouse sobre a imagem”.
<IMG SRC="URL_imagem" ALT="descrição_da_imagem">
Dessa forma:
<IMG SRC="newred.gif" ALT="Novo!!!">
WIDTH e 
HEIGHT
Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML 
coloca automaticamente os valores destes atributos, quando indicamos a 
inserção de uma imagem.
<IMG SRC="URL_imagem" ALT="descrição" WIDTH="largura" 
HEIGHT="altura">
Uma das vantagens de se usar esses atributos é que o browser pode montar mais 
rapidamente as páginas, por saber de antemão o espaço que deverá ser 
reservado a elas.
BORDER
Quando uma frase é marcada como âncora de um link, ela se apresenta 
sublinhada; quando uma imagem faz as vezes de âncora, ganha uma borda, que 
indica sua condição de link.
Porém, por questões de apresentação, nem sempre interessa termos essa borda 
ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse 
detalhe.
Se quisermos uma borda mais larga:
<A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=4> 
</A>
Se quisermos uma imagem sem borda:
<A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=0> 
</A>
Essa borda pode ser apresentada também em imagens que não são âncora de 
links. Basta aplicar, por exemplo, a formatação:
<IMG SRC="figura1.gif" ALT="Minha Foto" BORDER=2>
Projeto e­Jovem ­ Módulo II: HTML 28
ALIGN
<IMG SRC="imagem.extensão" ALT="descrição" 
ALIGN=alinhamento_desejado>
Existem também atributos de alinhamento que produzem os seguintes 
resultados:
ALIGN=TOP   Alinha o texto adjacente com o topo da imagem.→
ALIGN=MIDDLE   Alinha o texto adjacente com o meio da imagem.→
ALIGN=BOTTOM   Alinha o texto adjacente com a parte de baixo da imagem.→
ALIGN=RIGHT   Alinha imagem à direita, e o que houver ao redor a partir do→  
topo da imagem.
ALIGN=LEFT   Alinha imagem à esquerda, e o que houver ao redor a partir do→  
topo da imagem.
Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:
entre as imagens!
Isto resulta em:
E o resultado ficará parecido com o abaixo:
Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto 
desse alinhamento, ou seja:
Suponhamos   um   texto  mais   ou  menos   curto,   que   desejamos   colocar   com   a   imagem 
ilustrativa, mas gostaríamos que este trecho já estivesse abaixo da imagem! De acordo com 
o comprimento da primeira frase, não seria possível usar o alinhamento TOP.
Para conseguir isso, seria necessário incluir diversos <BR> consecutivos, inserindo linhas 
em branco: mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, então, 
o atributo CLEAR para <BR>.
Com esse atributo, podemos, por exemplo, ter um texto posicionado no ponto em que a 
margem direita   fica   livre,  com <BR CLEAR=RIGHT> ou no ponto  em que a  margem 
esquerda fica livre, com <BR CLEAR=LEFT>.
Dessa maneira, podemos controlar bem a posição relativa dos textos.
Também, pode­se posicionar o texto no ponto em que ambas as margens estão livres. Isso é 
conseguido com <BR CLEAR=ALL>
E, assim, vimos tudo sobre quebras de linha depois de imagens!
1.15.1.  Molduras de Imagem
Para   melhorar   ainda   mais   a   apresentação   das   imagens   junto   com   os   textos,   foram 
desenvolvidos atributos de moldura. Estes atributos definem o espaço ­ vertical e horizontal 
­ deixado entre as imagens e os textos circundantes:
<IMG SRC="imagem.extensão" VSPACE=espaço_vertical>
Projeto e­Jovem ­ Módulo II: HTML 29
<IMG SRC=" imagem.extensão " HSPACE=espaço_horizontal>
Outros exemplos:
<IMG SRC="foto.gif" WIDTH="148" HEIGHT="95" ALIGN=left VSPACE="30">
<IMG SRC="foto.gif" WIDTH="160" HEIGHT="71" ALIGN=right HSPACE="30">
Abaixo, temos um exemplo com os dois atributos, através da formatação:
<IMG   SRC="foto.gif"   ALIGN="LEFT"   WIDTH="63"   HEIGHT="68"   HSPACE="20" 
VSPACE="20">
1.16.  Tabelas <TABLE>
A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A 
manipulação de tabelas, mesmo em editores, é trabalhosa. A maior diferença entre tabelas 
em HTML e em editores como o MS­Word, entretanto, é o fato das tabelas em HTML serem 
definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer 
deste capítulo.
As tabelas foram uma grande conquista para os autores de documentos para a Web. Com 
elas, é  possível termos páginas organizadas em colunas, sendo uma delas reservada aos 
links de navegação dentro de cada seção.
Tabelas  implementam um conceito  importante de layout: as “grades”,  segundo as quais 
organizamos textos e ilustrações de maneira harmoniosa.
Como   já   foi   possível   perceber,   as   tabelas   contêm:   textos,   listas,   parágrafos,   imagens, 
formulários e várias outras formatações, inclusive outras tabelas. Novas versões de HTML e 
de browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo 
aqui é saber lidar com a maioria desses recursos disponíveis.
1.16.1.  Elementos básicos de tabelas
A base de uma tabela é determinada por <TABLE>...</TABLE>, que delimita uma tabela. 
Um atributo básico é BORDER, que indica a apresentação da borda.
<TABLE BORDER="borda">...</TABLE>
Títulos, linhas e elementos
<CAPTION>...</CAPTION> Define o título da tabela
<TR>...</TR> Delimita uma linha
<TH>...</TH> Define um cabeçalho (dentro de <TR>)
<TD>...</TD> Delimita um elemento ou célula (dentro de <TR>)
Veremos agora um exemplo de tabela simples com borda.
  
É 
Projeto e­Jovem ­ Módulo II: HTML 30
possível   englobar   colunas   e   linhas,   através   dos   atributos:   COLSPAN   (para   colunas)   e 
ROWSPAN (para linhas):
Neste   exemplo,   vemos   que   o   cabeçalho   Colunas   1   e   2   compreende   duas   colunas 
(COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
Para uma página sem borda, podemos tratar de duas formas:
                <TABLE BORDER="0">...</TABLE>     ou     <TABLE>...</TABLE>
Dica: A formatação de tabelas é complicada, pois, dependendo do tamanho, 
passa a ser complexa, uma vez que fazemos uso de seus diversos atributos. A 
melhor opção, sem dúvida, é usar os editores WYSIWYG(Como o quanta). 
Diversas   extensões   de   tabelas   possibilitam   a   apresentação   de   efeitos  muito   bons   nas 
páginas.
A primeira delas é a cor de fundo e a cor da borda:
  
Observando agora os atributos CELLSPACING e CELLPADDING.
Projeto e­Jovem ­ Módulo II: HTML 31
1.17.  Listas
Há vários tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas 
pelos browsers:
1.17.1.  Listas de Definição
Estas   listas   são   chamadas   também “Listas  de  Glossário”,  uma vez  que   têm o   seguinte 
formato:
    Que produz:
Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por 
permitir a tabulação do texto.Um exemplo é a lista composta abaixo:
O que resulta em:
1.17.2.  Listas não­numeradas
São equivalentes às listas com marcadores do MS­Word, por exemplo:
Projeto e­Jovem ­ Módulo II: HTML 32
A   diferença   entre   o   resultado   da  marcação  HTML   e   do  Word   está   na  mudança   dos 
marcadores, assinalando os diversos níveis de listas compostas:
Resulta em:
1.17.3.  Listas Numeradas
Resulta em:
Estas   listas   não   apresentam  numeração   em   formato  1.1,   1.2,   etc.  Quando   compostas, 
apresentam­se da seguinte forma:
     1. Documentos básicos
     2. Documentos avançados
              1. formulários
                      1. CGI
                      2. contadores
                      3. relógios
              2. Detalhes sobre imagens
Porém, através do atributo TYPE (HTML 3.2), pode­se lidar com a numeração dos itens:
Resulta em:
Projeto e­Jovem ­ Módulo II: HTML 33
Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista:
    
Resulta em: 
1.17.4.  Listas e sub­listas
As listas podem ser aninhadas. Por exemplo:
Resulta em:
1.18.  Frames (Molduras)
Os frames são divisões da tela do browser 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 (menus).
É muito fácil colocar frames em páginas, porém, nem todos os usuários gostam deles, pois 
nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos 
documentos interiores aos frames nos bookmarks. A alternativa natural para os frames são 
as tabelas.
Uma página com frames tem um texto fonte semelhante a:
Projeto e­Jovem ­ Módulo II: HTML 34
A parte FRAMESET define a divisão da página em “quadros”. Neste exemplo, a página será 
dividida em duas colunas, 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, no código acima vemos que a página indice1.html será mostrada na primeira coluna 
(que   ocupará   20%   da   tela),   e   a   página   apresenta.html   será   mostrada   na   segunda 
(ocupando 80% da tela).
A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente 
pelos browsers que não suportam sua apresentação.
1.19.  Áudio e Vídeo
O uso de áudio e vídeo na Internet vem ganhando muito destaque nos últimos anos, e é 
bom saber como usar bem estas mídias.
Áudio   e   vídeo   são   classificados   como   "mídias   contínuas",   pois   são   geradas   segundo 
determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distorções. 
Quanto mais informações de uma seqüência de áudio ou vídeo digital são armazenadas, 
melhor a qualidade do áudio ou vídeo reproduzido. Isso implica, logicamente, no fato de 
arquivos de áudio e vídeo serem geralmente muito grandes, o que torna inviável o uso mais 
freqüente dessas mídias em páginas Web.
Além de  procurarmos   lidar   sempre   com pequenos   trechos  de  áudio  e   vídeo,  podemos 
explorar tecnologias recentes que permitem a transmissão em tempo real.
1.19.1.  Áudio
Há duas maneiras de inserir som em uma página:
<EMBED SRC="arquivo_de_som.extensão"> 
<BGSOUND SRC=" arquivo_de_som.extensão "> 
Na primeira opção, insere o arquivo de som como objeto.
Na segunda, faz com que o som seja inserido como som de fundo ou 'trilha sonora' de uma 
página. Esta formatação só funciona no Internet Explorer.
Essas   formatações,   porém,   não   farão   efeito   algum   quando   o   browser   não   estiver 
configurado para "executar" o arquivo de som por meio de um plug­in adequado, ou se o 
computador em que estiver carregada a página não tiver instalada uma placa de som.
1.19.1.1. Tipos de arquivo de áudio
Os tipos de arquivo de áudio são escolhidos: segundo o tipo de áudio (voz, sons, música), a 
aplicação  desse  áudio  e  a  qualidade  de   reprodução  desejada.  Aqui   serão  apresentados 
apenas os tipos mais comuns:
• AU (Sun Audio): usado pelas estações de trabalho da Sun Microsystems.
• AIFF: usado geralmente em máquinas Macintosh e Silicon Graphics.
Projeto e­Jovem ­ Módulo II: HTML 35
• RIFF (Resource Interchange File Format): pode conter muitos  tipos diferentes de 
dados,  incluindo áudio digital (WAV) e MIDI.  Geralmente, os "arquivos MIDI" do 
Microsoft Windows estão, na realidade, em formato RIFF e não MIDI.
• WAV (Wave): é um subconjunto da especificação RIFF.
• AVI (Audio Video Interleave): formato Microsoft.
• MPEG (Motion Pictures Expert Group): o padrão MPEG­3 (conhecido por MP3) é o 
padrão de compressão de áudio mais popular atualmente.
• MIDI   (Musical   Instrument  Digital   Interface):   não  é   exatamente   um   formato   de 
áudio, mas de representação de música. Um arquivo MIDI armazena informações 
sobre   cada   nota   e   instrumento   e,   a   partir   dessas   informações,   um   sintetizador 
reproduz os sons. Por isso, uma música instrumental em MIDI geralmente produzirá 
um arquivo muito  menor do que a  mesma música  em Wave,  ou qualquer  outro 
formato.
1.19.2.  Vídeo
A inserção de vídeo depende bastante do tipo de arquivo de vídeo que temos para inserir 
em uma página. De maneira geral,  esta formatação pode servir  para a  inserção de um 
arquivo QuickTime:
<EMBED SRC="arquivo_de_video.extensão">
Uma formatação mais completa inclui a indicação do plug­in e controles da reprodução do 
vídeo.
1.20.  Outros  
1.20.1.  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á um fator ainda mais chamativo, 
o que causa um efeito final cansativo e confuso.
Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript.
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 quantidade, muito menos em frases inteiras ou cabeçalhos.
1.20.2.  Marquee 
É possível obter o efeito de animação de texto, através desta TAG.
<MARQUEE BEHAVIOR=efeito> Texto </MARQUEE>
Projeto e­Jovem ­ Módulo II: HTML 36
Atributos de largura e direção do efeito permitem diversas apresentações diferentes, por 
exemplo:
<MARQUEE BEHAVIOR=SCROLL WIDTH=30%> Texto </MARQUEE>
<MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT> Texto </MARQUEE>
<MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT> Texto </MARQUEE>
Atenção: O efeito Marquee só é executado no Internet Explorer e em versões recentes do 
Netscape, e de maneiras diferentes.
Projeto e­Jovem ­ Módulo II: CSS 37
Capítulo 2.  CSS
2.1.  Introdução ao CSS
CSS é a sigla para Cascading Style Sheets que foi traduzido, em português, para folhas de 
estilo em cascata, que significam um documento onde são definidas regras de formatação 
ou de estilos a serem aplicadas aos elementos estruturais de marcação. 
A   finalidade  das  CSS  é   a  de   retirar  do  HTML  toda  e  qualquer  declaração  que  vise   a 
formatação, ou seja, a apresentação do documento. Isto significa dizer que TAGS do tipo 
<font>, <bold> , <b>, <em> <i>....etc, bem como o uso de colunas e linhas de tabelas 
para obtenção de espaçamentos não são admitidos ou, se admitidos, com restrições em um 
projeto Web com CSS.
As TAGS <strong> e <em> devem ser usadas em substituição à  <b>  e  <i>,  se a sua 
intenção é a de contemplar estas tecnologias.
Contudo, embora o suporte para elas deva continuar ainda por muito tempo, nada aponta 
para uma revitalização de <b> e <i>. Pelo contrário, as evidências a esta época indicam 
que elas sejam banidas a partir do 2.0. 
Deve­se usar o CSS porque permite que vocêretire da marcação HTML toda a formatação 
(apresentação) do documento WEB. Quem vai determinar cores, formas, tipos, tamanhos, 
posicionamento, e, enfim, todo o "visual" da página, são as CSS. 
Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis  uma relação das 
principais: 
a) Controle total sobre a apresentação do site a partir de um arquivo central; 
b) Agilização da manutenção e redesign do site;
c) Saída para diferentes tipos de mídia a partir de uma versão única de HTML;
d) Redução do tempo de carga dos documentos Web;
e) Adequação simplificada aos critérios de acessibilidade e usabilidade;
f) Elaboração de documentos consistentes com as aplicações futuras de usuários;
g) Aumento considerável na portabilidade dos documentos Web.
Quando um usuário quer acessar uma página web,  o browser  tem que analisar  todo o 
código HTML desta para representá­la na tela. Se você colocar uma formatação complexa 
nas   suas  páginas,   isso  acrescentará  um  tempo  maior  de  análise  para   cada  página.  Ao 
colocar as formatações numa única folha de estilo referenciada por cada página, você reduz 
a quantidade de código das páginas e, conseqüentemente, isto reduz também a quantidade 
de dados que têm que ser transmitidos e analisados pelos browsers. O resultado são páginas 
que aparecem mais rapidamente e usuários mais felizes.
Projeto e­Jovem ­ Módulo II: CSS 38
2.2.  Estrutura do CSS
 O CSS é composto por regra, que é uma unidade mínima de programação de estilos, que 
segue uma sintaxe própria e destina­se a estilizar uma ou mais propriedades. 
A  sintaxe de uma regra compreende um  seletor, uma  propriedade  e um  valor,  escritos 
como mostrado abaixo. Ao conjunto de propriedade e valor, denominamos de declaração. 
• Seletor (Elemento)   descreve o elemento de design ao qual o estilo será aplicado.→  
A mesma tag HTML, mas sem os sinais de maior e menor. Essa parte da regra é, às 
vezes, chamada de seletor.
• Proriedade (Atributo)   o aspecto específico do elemento que você quer usar como→  
estilo. Deve ser um nome de atributo CSS válido, como o atributo font­size.
• Valor   a configuração aplicada ao atributo. Deve ser uma configuração válida para→  
o atributo em questão, como 20pt (20 pontos) para font­size.
• Atributo:  valor     a   parte   declaração   da   regra.   Você   pode   atribuir   múltiplas→  
declarações se desejar separá­los com ponto­e­vírgula (;). 
Por exemplo:
h1 {color: #000000;} é uma regra CSS
Onde:
•h1 é o seletor
•{color: #000000;} é a declaração
•color é a propriedade CSS
•#000000 é o valor CSS
p {text­indent:10pt;} é uma regra CSS
Onde:
•p é o seletor.
•{text­indent: 10pt} é a declaração CSS
•text­indent ­ é a propriedade CSS
•10pt ­ é o valor CSS
Entre os caracteres permitidos no CSS estão as letras de a­z, A­Z, os números de 0­9, hífen 
e caracteres de escape. Caracteres Unicode 161­255, bem como caracteres Unicode como 
códigos numéricos. Não é permitido iniciar um nome com um traço ou número.
2.3.  Iniciando a prática do CSS
Tendo estas primeiras noções, veremos agora como incorporar as regras de CSS. Como foi 
dito, não mais usaremos as TAGS da forma que foram usadas anteriormente, algumas delas 
nem mais serão usadas, e as que forem usadas, serão modificadas.
Primeiramente, iremos utilizar, assim como no inicio, o programa Quanta.
Vamos novamente abri­lo e executar o documento básico, como fizemos lá, digitaremos um 
texto   abaixo  para   facilitar   o   andamento  da   atividade,   pegaremos  um  trecho  da  nossa 
apostila:
Projeto e­Jovem ­ Módulo II: CSS 39
Vamos começar a entender a mudança dos atributos do corpo do texto (<body>) e do 
título do texto, não usando mais declarações de TAGS dadas antes.
Primeiramente, clique dentro da TAG <BODY>. Em seguida, na aba estilo (Figura abaixo) 
e em depois no ícone CSS:
Aparecerá a tela com as propriedades do CSS.
Vamos primeiramente modificar o tipo de fonte (font­family) e o tamanho da fonte (font­
size). Para modificar o tipo de fonte, dê dois cliques no nome font (Destaque na imagem 
abaixo) e em seguida clique no ícone:
Surgirá a tela para escolha das fontes desejadas. Ao visualizar a fonte desejada, clique na 
seta em destaque. (Conforme figura abaixo). Escolha 3 fontes e confirme no OK.
Projeto e­Jovem ­ Módulo II: CSS 40
Siga os mesmos passos no font­size, colocando o tamanho 13.
Confirma no OK e veja o resultado da TAG <BODY>
Agora, já que vimos uma parte do que se pode fazer, iremos então modificar um pouco mais 
a TAG <BODY> e incrementar a TAG <H2>
Faça as modificações você mesmo:
Como resultado temos:
Tendo isso, podemos na nossa página modificar os valores e ir verificando o resultado.
Salve o documento como “Primeiro_CSS.html”.
As Regras não são case sensitivas,   isto é,  podem­se usar maiúsculas ou minúsculas nas 
folhas de estilo indiferentemente. Isto é válido somente para as declarações específicas da 
folha de estilo, porém em outros casos, não. Por exemplo: na declaração, escrever o valor 
figura.gif é diferente de FIGURA.gif 
Comentários podem e devem ser usados nas folhas de estilo. É recomendável que se faça 
amplo uso de comentários para fornecer informações sobre os seletores, propriedades e 
valores declarados, com o intuito de facilitar futuras modificações ou mesmo entendimento 
do   código  gerado.  Os  comentários  devem estar   entre  as  marcas  /* e  */  e  podem ser 
inseridos em qualquer espaço em branco dentro da folha de estilos. Não são permitidos 
comentários aninhados.
/* Isto é um comentário CSS */
Dentro do CSS, temos efeito cascata, que é o método pelo qual é aplicada uma regra em 
função do importância da regra. Quando em um elemento HTML aplica­se mais de uma 
regra, diz­se que há um conflito de regras e será aplicada aquela que tiver maior 
prioridade, sendo determinada pela ordem do efeito cascata.
A  ordem para  o  efeito  cascata  é   a  ordenação das   regras  de  acordo com critérios  pré­
estabelecidos, com a finalidade de resolver eventuais conflitos entre regras. E estes critérios 
são os abaixo enumerados:
• Localizadas   todas   as   regras   aplicáveis   ao   seletor/propriedade,   determina­se   a 
especificidade de cada uma delas. A regra mais especifica entre as conflitantes será 
aplicada.
Projeto e­Jovem ­ Módulo II: CSS 41
• Se não for encontra uma (ou mais) regra aplicável ao elemento HTML, este herdará 
as  propriedades de estilo  de  seu elemento pai.  Não havendo elemento  pai,   será 
aplicado o valor inicial default de estilo para aquele elemento
• Regras com declaração importante (!important) tem prioridade sobre aquelas sem a 
declaração. Se o autor e o usuário declaram regras conflitantes com !important, as 
do usuário têm prioridade sobre as do autor.
• Regras com mesmo pêso (sem !important) e coflitantes, declaradas pelo autor têm 
prioridade   sobre  aquelas  declaradas  pelo  usuário.  Regras  do  usuário   com maior 
especificidade   que   aquelas   do   autor   têm   a   prioridade.   Regras   com   igual 
especificidade declaradas pelo autor têm prioridade sobre as do usuário. Regras do 
autor e do usuário têm prioridade sobre as regras default das aplicações do usuário 
(p.ex.: o browser)
• Regras mais específicas têm a prioridade sobre as menos específicas.
• Entre   regras   de  mesmo  peso,   têm prioridade   aquelas   declaradas   por  último  na 
sequência das regras na folha de estilos. 
• Folhas de estilo inline, incorporadas, lincadas e importadas (@import) nesta ordem, 
têm do maior para o menor peso (estilos inline têm o maior peso). Entre várias 
folhas de estilo lincadas, têm maior prioridade aquela importada por último (mais 
próxima da tag </head>). O mesmo ocorre entre as folhas importadas (@import)
2.3.1.  Declaração e o fragmento de uma regra dentro dos colchetes { }
A declaração compõe­se de duas partes: a propriedade e o valor e uma regra pode conter 
várias declarações separadas por um ponto­e­vírgula (;).
Por exemplo:
h1 {color: #000000;/* esta linha contém a declaração */ }  
Pode­se atribuir mais de uma declaração a um seletor, para isso, as declarações devem ser 
separadas por ponto­e­vírgula.
Por exemplo:
p { background: #FFFFFF;  color: #000000;}
Seletor é uma entidade que identifica um elemento HTML ou define uma classe ou pseudo 
classe na qual a regra de estilo será aplicada. 
Por exemplo:
p {font­size: 12px;} 
O seletor é p (elemento HTML parágrafo) e a regra escrita determina que os parágrafos 
terão uma fonte de tamanho 12px. 
p, ul {text­indent: 10pt;}
Os seletores são p e ul 
Agrupamento de seletores é uma forma compacta de reunir seletores que compartilham as 
mesmas regras de estilo.
Projeto e­Jovem ­ Módulo II: CSS 42
Por exemplo:
p { color:#000000;}
.classeb {color: #000000;} 
span {color: #000000;} 
Os seletores p.classeb e span correspondem em letras na cor preta, então podemos agrupá­
los assim como abaixo, porém note que os seletores agrupados devem ser separados por 
virgula:
p, .classeb, span { color:#000000;}
2.4.  Estruturando melhor o CSS
Até agora vimos como criar o CSS, mas dentro da TAG. Podemos fazer isso separadamente, 
o que inicialmente iremos fazer dentro do mesmo arquivo HTML, porém como vimos no 
exemplo anterior, já temos a necessidade de visualizar como iremos criar isso.
Você   pode  definir   regras  de  CSS  em  três   lugares.  E,  por  definição,  pode  utilizar  uma 
combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre 
si está relacionada à parte "em cascata". Os três lugares são: 1) em um documento separado 
fora de todos os documentos HTML, 2) no cabeçalho de um documento HTML e 3) dentro 
de uma tag de HTML. 
Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo 
diferente, como discutido aqui:
• Externo  ­ significa que você  coloca as regras de CSS em um arquivo separado, e 
então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe 
permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma 
página do seu web site.
• Incorporado  ­   significa   que   você   especifica   as   regras   de  CSS   no   cabeçalho   do 
documento. As regras incorporadas afetam somente a página atual.
• Inline ­ significa que você especifica as regras de CSS dentro da tag de HTML. Essas 
regras afetam somente a tag atual.
2.4.1.  Estilos externos
Para definir um conjunto de regras de estilo que você pode facilmente aplicar em alguma 
página do seu site, é preciso colocar as regras em um arquivo de texto. Você pode criar este 
arquivo com um editor de textos simples e dar ao nome desse arquivo a extensão .css. 
Sempre   que   quiser   utilizar   esses   estilos   em  uma  nova   página,   basta   colocar   uma   tag 
<LINK> no cabeçalho que referencie esse arquivo .css. Veja o exemplo:
Arquivo meu_estilo.css
H1 {font­family: 'Comic Sans MS'; font­size: 36pt; color: blue}
P {font­family: 'Courier'; margin­left: 0.5in}
Projeto e­Jovem ­ Módulo II: CSS 43
Agora, para utilizar os estilos definidos neste arquivo .css, você precisa adicionar a tag a 
seguir   ao   cabeçalho   da   página,   onde  nome_do_arquivo  é   uma   referência   absoluta   ou 
relativa ao arquivo .css.
<LINK   REL="STYLESHEET"   HREF="http://www.iecentral.net/meu_estilo.css" 
TYPE="text/css">
OBS:   Você   deve   inserir   este   texto   entre   as   tags   <HEAD>...</HEAD>   e   colocar   a 
localização correta do seu arquivo e seu nome.
2.4.2.  Estilos incorporados
Se quiser  criar  um conjunto de estilos  que se  aplicam a uma única página,  você  pode 
configurar os estilos exatamente como fizemos no exemplo dos estilos externos, mas, em 
vez de colocar as tags <STYLE>...</STYLE> e as regras em um arquivo separado, coloque 
estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza 
estilos incorporados é semelhante ao seguinte código:
2.4.3.  Estilos inline
Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual, não outras 
tags na página e tão pouco, outros documentos. A sintaxe para definir um estilo inline é a 
seguinte:  <TAG STYLE="regras css"> 
Exemplo: 
Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE 
dentro da tag para definir o estilo. 
2.5.  Propriedades e Valores de Fontes
Fontes são estilos de apresentação consistentes aplicados a alfabetos. Uma fonte consiste de 
atributos que alteram a aparência de um símbolo, sem alterar o seu significado. Oferecem 
as   informações   necessárias   para   que   uma   letra   ou   símbolo   possa   ser   representado 
graficamente.
Os atributos essenciais de uma fonte são:
• Seu tipo (ou família)
• Seu tamanho
• Seu estilo (regular, itálico, outline, etc.)
• Seu peso (normal, negrito, light, black)
Projeto e­Jovem ­ Módulo II: CSS 44
Para representar qualquer texto, portanto, é preciso escolher uma fonte, ou seja: um tipo, 
um estilo, um peso e um tamanho. Letras maiúsculas e minúsculas não são consideradas 
fontes diferentes, pois têm um significado distinto.
Os quatro atributos acima podem ser definidos em CSS através das propriedades: font­
family,   font­size,   font­style  e  font­weight.  Não é  preciso  definir   todas,  pois   sempre têm 
valores default. CSS oferece ainda font­variant, que permite considerar outras variações de 
uma fonte.
2.5.1.  font­family
Uma família de fontes (tipo) é selecionada com a propriedade font­family. Esta propriedade 
aceita   uma   lista   de   valores   separados   por   vírgulas,   representando   nomes   de   fontes 
existentes ou não no sistema do usuário. No final da lista, pode ser incluída uma referência 
a uma família genérica, que será usada caso nenhum dos nomes coincida com o nome de 
uma fonte do sistema.
A sintaxe é:
font­family: fonte1, fonte2, fonte3, ..., fonte­genérica
Exemplos:
O browser usará a primeira fonte da lista, se encontrá­la. Se não encontrar, irá procurar a 
fonte seguinte.
Se o nome de uma fonte tiver mais de uma palavra, este deverá ser colocado entre aspas.
As aspas podem ser apóstrofes simples (') ou aspas duplas ("). Os apóstrofes são necessários 
quando for preciso especificar estilos dentro de um atributo HTML:
2.5.2.  font­size
O tamanho de uma fonte é  alterado usando font­size. Pode ser especificado em valores 
absolutos ou relativos. Para especificar um valor absoluto, pode­se usar:
font­size: número(pt | px | cm | mm | pc | in)
font­size: xx­small|x­small|small|medium|large|x­large|xx­large
O tamanho também pode ser especificado relativo ao elemento no qual o atual objeto está 
contido.
1. font­size: tamanho_relativo (smaller, larger)
2. font­size: comprimento (em ou ex)
3. font­size: porcentagem (%)
Projeto e­Jovem ­ Módulo II: CSS 45
Exemplos:
Os tamanhos de pontos devem ser especificados como valores inteiros (mesmo se usados 
cm ou  in).  Os browsers podem formatar os tamanhos de forma diferente e os mesmos 
podem   ser   alterados   pelos   usuários   nos   browsers   atuais.   As   unidades   válidas   são:   pt 
(pontos), px (pixels), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas).
2.5.3.  font­style e font­weight
O estilo de uma fonte é afetado através de duas diferentes propriedades: font­weight, que 
altera o peso da fonte, e font­style, que altera o estilo ou inclinação.
Sintaxe:
4. font­style: normal (ou italic, oblique)
      Exemplos:
      Sintaxe:
• font­weight: normal | bold (normal=400 e bold = 700)
• font­weight: bolder | lighter (valores relativos)
• font­weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
       Exemplos:
A  palavra  oblique  deve   fazer   com que   fontes   chamadas  de   "oblique"   (se   existirem no 
sistema) sejam usadas, assim como ocorre com fontes "italic". A rigor, italic é uma fonte 
distinta  da  normal,   e   não,  meramente  uma   versão   inclinada  da  mesma.  Os   browsers, 
porém, não encontrando um equivalente "italic", "oblique", "kursiv" ou similar,