Apostila_HTML_CSS_E-Jovem 11
73 pág.

Apostila_HTML_CSS_E-Jovem 11


DisciplinaAnálise Textual8.708 materiais291.211 seguidores
Pré-visualização17 páginas
uma 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.
\u2022Passo   1:  Abrir   o   Ambiente   de   Desenvolvimento   WEB   (Iniciar>Desenvolvimento 
WEB>Quanta Plus)
\u2022Passo 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 \u201cMinhas  páginas  HTML\u201d   )  com o nome 
\u201cMinha_primeira_página.html\u201d
Como salvar:
Para Salvar, é simples: Basta primeiramente clicar no menu: Arquivo   Salvar\u2192 . Localiza­se 
onde está sua pasta e é só salvar quando estiver dento de \u201cMinhas páginas HTML\u201d
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: \u201c<!­­Título do Documento­­>\u201d. 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\u2019á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 \u201c#rrggbb\u201d. 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=&quot;BLUE&quot;.
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 \u201csegunda_pagina.html\u201d
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 \u201cMostrar 
DTD\u201d   e   \u201cMeta  Quanta\u201d.   Confirme   clicando   em 
\u201cOK\u201d, 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 \u201cSegunda_página_modificada.html\u201d, 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 \u201cMinhas Páginas HTML\u201d. Escolhemos a imagem com o nome \u201cfirefox­
wallpaper.jpg\u201d.
Portanto, colocaremos, do mesmo jeito que salvamos, o nome do arquivo dentro da TAG 
<body>, como mostra abaixo:
Salve   com   o   nome   \u201cSegunda_pagina_com_background.html\u201d,   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 
\u201cPagina_com_cabeçalho.html\u201d.  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óximo