Grátis
73 pág.
Denunciar
Pré-visualização | Página 4 de 17
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, evitandose 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→ . Localizase onde está sua pasta e é só salvar quando estiver dento de “Minhas páginas HTML” Projeto eJovem 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 definilos, 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 eJovem 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 eJovem 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 eJovem 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, salvea 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 eJovem Módulo II: HTML 15 Nota: Devese 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, salvandoa 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 eJovem 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
