Escola Secundária de Bombarral

Conceito A linguagem HTML Uma página da Web é composta basicamente de textos e comandos especiais (tags) de uma linguagem de programação chamada HTML, abreviação de Hiper Text Markup Language. Ela é bastante simples, e tem como finalidade básica formatar o texto exibido e criar ligações entre páginas usando o conceito do hipertexto. Editores Assim como em qualquer linguagem, o programador deve HTML escrever o código-fonte seguindo as regras de sintaxe. Este Front Page código-fonte é interpretado posteriormente pelo browser, que (Microsoft) se incaregará de interpretar as tags (ou comandos). O código-fonte pode ser escrito em qualquer editor de texto GNNpress simples. Até mesmo o programa NotePad do Windows pode (GNN) ser usado. Contudo a forma mais rápida de se escrever uma HotDog página Web (Home Page) é usar um editor HTML. (Sausage Existem vários editores de HTML disponíveis, mas lembre- software) se: Nada substitui o conhecimento da linguagem HTML e das FlexED técnicas de construção de páginas. O que são TAGS Quando um browser exibe uma página Web, ele lê o texto da página e procura por símbolos especiais denominados tags, que dizem como a informação deve ser exibida. Por exemplo: uma tag pode dizer se um texto deve ser exibido em negrito ou itálico, com que tipo, cor e tamanho de fonte... Uma tag também pode indicar que um determinado texto é uma ligação com outra Home Page (link). As tags normalmente são indicadas em pares, delimitando um texto que sofrerá algum tipo de formatação. Porém, existem também várias tags individuais.

A estrutura de uma página HTML Assim como em outras liguagens, existem estruturas básicas que identificam partes de um programa HTML. O comando é usado para delimitar a área dos comandos da Título da página linguagem HTML. Já o comando é usado para específicar algumas tags, onde a mais importante é ************************************** a tag que indica o nome da área reservada para os camandos da linguagem página. O mais importante dos ************************************** comando mostrado no quadro ao lado é tag que controla todo o esquema de cores da página. Ou seja, é dentro dela que você era escolher a cor de fundo, a cor do texto, a cor do link, etc... Este comando será estudado depois. Uma página HTML é composta basicamente de títulos, textos, imagens e links. Estes dois últimos responsáveis pela ligação entre páginas.

Docente: Ana Carvalho

1

Escola Secundária de Bombarral

Formatação Cabeçalhos A primeira etapa para se contruir uma página HTML é definir os cabeçalhos. São linhas do documento que aparecem com um tamanho de letra diferenciado do restante do texto, tendo como finalidade identificar o ínicio de um documento, seção ou tópico. Existem seis tamanhos ou modelos de cabeçalho em HTML. O comando tem a seguinte sintaxe: Texto do cabeçalho Onde "n" deve ser substituído por um número de 1 a 6, sendo o maior cabeçalhor representado pelo comando e o menor pelo comando Cabeçalho 1 Cabeçalho 2 Cabeçalho 3 Cabeçalho 4 Cabeçalho 5 Cabeçalho 6 Os comandos acima produzem o seguinte efeito:

Docente: Ana Carvalho

2

Escola Secundária de Bombarral

Parágrafo e Quebra de Linha Nas páginas HTML você pode digitar o texto exactamente no lugar onde deseja que ele apareça na tela, da mesma forma que faz com um editor de texto comum. A diferença principal entre o editor de texto tradicional e a página HTML é que este último não reconhece o fim de um parágrafo quando se pressiona a tecla Enter. É necessário então, forçar o fim do parágrafo e a quebra de linha usando comandos especiais. A tag responsável pelo fim de parágrafo é a e a tag responsável pela quebra de linha é a
.

Exemplo de quebra de parágrafo Como já foi dito antes, é necessário forçar a quebra de parágrafo em um documento HTML. De nada adianta pressionar a tecla ENTER no final da linha, apenas o comando "P", consegue esse efeito. Quando o Browser exibir essa página, as duas primeiras frases estarão num em um único parágrafo. Você notará também que não adiantará usar mais de um comando "P" para conseguir linhas em branco, apenas um será executado. Se você quiser separar uma seção da página use o comando "HR". Ele insere uma linha horizontal no local especificado. A linha anterior contém o comando "HR". Além do comando , que avança o texto para a próxima linha, você pode criar uma separação de blocos de texto usando o comando , que insere uma linha divisória no local onde é especificado. Note que o comando é obedecido e executado independentemente do redimensionamento da janela, e numa repetição, apenas um é executado. Veja um exemplo da utilização destes comandos baseado no código-fonte acima...

Docente: Ana Carvalho

3

Escola Secundária de Bombarral

Exemplo de quebra de parágrafo Como já foi dito antes, é necessário forçar a quebra de parágrafo em um documento HTML. De nada adianta pressionar a tecla ENTER no final da linha, apenas o comando "P", consegue esse efeito. Quando o Browser exibir essa página, as duas primeiras frases estarão num em um único parágrafo. Você notará também que não adiantará usar mais de um comando "P" para conseguir linhas em branco, apenas um será executado. Se você quiser separar uma seção da página use o comando "HR". Ele insere uma linha horizontal no local especificado. A linha anterior contém o comando "HR".

Exemplos de quebra de linha Como já disse anteriormente de nada adianta pressionar a tecla ENTER no final de uma linha O Browser não reconhece.

No entanto, através do linha sem na sua sequência.

esse comando inserir

efeito "BR" uma

pode que linha

ser quebra em

obtido a branco

Exemplos de quebra de linha Como já disse anteriormente de nada adianta pressionar a tecla ENTER no final de uma linha O Browser não reconhece. No entanto, esse efeito pode ser obtido
através do comando "BR" que quebra a
linha sem inserir uma linha em branco
na sua sequência.

Docente: Ana Carvalho

4

Escola Secundária de Bombarral Em muitas situações, você precisa quebrar a linha e continuar o texto na linha seguinte, sem deixar um espaço em branco. Nessa situação o comando que deve ser utilizado é
. Note a diferença causada pelos dois comandos no exemplo baseado no código-fonte ao lado.

Formatação de Texto Assim como num editor de texto, você pode também formatar seu texto em HTML, modificando seu tipo e tamanho de fonte. Todos os comandos que alteram o estilo do texto devem ser usado aos pares; onde o primeiro "liga" o efeito e o segundo "desliga". Os principais comandos de estilo de texto são: Efeito

Sintaxe

Função

Negrito

Texto

Aplica o estilo negrito

Itálico

Texto

Aplica o estilo itálico

Sublinhado Texto Strong

Aplica o estilo sublinhado

Texto Similar ao negrito

Typerwriter Texto

Deixa o texto com espaçamento regular

Big

Texto

Aumenta a fonte e aplica

Small

Texto

Reduz a fonte

Sobrescrito Texto

Eleva o texto e diminui o seu tamanho

Subscrito

Texto

Rebaixa o texto e diminui o seu tamnaho

Piscante

Texto

Faz com que o texto pisque

Veja um exemplo da utilização destes comandos baseado no código-fonte abaxio... Docente: Ana Carvalho

5

Escola Secundária de Bombarral Este texto está em negrito
Este texto está em itálico
Este texto está sublinhado
Este texto está sublinhado em negrito e itálico Este texto recebeu o efeito Strong que é similar ao negrito
Este texto recebeu o efeito Typerwriter
Esta é a diferença entre um texto Big e um Small
Esta é a diferença entre um texto Subscrito e um Sobrescrito Para chamar a ATENÇÃO use o comando Blink

Imagens Incluir uma imagem em sua Home Page é uma tarefa bem fácil. Exige apenas que você tenha disponível a figura e que ela esteja num dos formatos aceitos pelo browser. Há dois formatos de figura padrões na Web: O GIF e o JPG, este último reduzindo em até dez vezes o tamanho de uma imagem. Os browserr Netscape e Internet Explorer trabalham com esses dois tipos de arquivo. ATENÇÃO: As imagens no formato BMP comuns no Windows não servem. Elas precisam ser convertidas para um dos formatos padrões. Existem diversos progamas que transformam imagens BMP em GIF ou JPG. Entre eles estão os famosos Adobe Photoshop, Corel PhotoPaint, Photostyle e Picture Publisher. Mas a própria Internet oferece alguns sharewares que dão conta do recado. São eles: LView, PaintShop, Wingif e muitos outros. A nova versão de Paint que acompanha Windows 98 tambem faz estas conversão e essa foi uma boa ideia de Microsoft. O comando usado para inserir uma imagem é:

Docente: Ana Carvalho

6

Escola Secundária de Bombarral Com o atributo ALIGN= você pode alinhar o texto por baixo (bottom), pelo meio (middle) e por cima (top). Se o atributo ALIGN for omitido, o browser tomará o alinhamento pelo fundo como padrão. A váriavel ALIGN="right" alinhada a imagem no canto direito da página e faz com que o texto à contorne. Se ao invés de usar a opção right usarmos a opção left o mesmo efeito será obtido com a imagem alinhada no canto esquerdo da página. Alinhando a imagem por cima
Alinhando a imagem pelo meio
Alinhando a imagem por baixo Para centralizar a imagem acima foi usado o comando CENTER e não foi estipulado nehum tipo de alinhamento. Já nesta imagem foi usada a opção left que produz um efeito interessante. Está é uma imagem com alinhamento a direita (right). Repare que assim como na imagem anterior o texto contorna a imagem. Veja o exemplo baseado no código-fonte acima... Antes de inundar suas páginas de imagens, lembre-se de que, ao usar a rede, a velocidade de transmissão das imagens é muito pequena, girando em torno de 1KB por segundo. Por tanto uma imagem de 100 KB pode levar vários minutos para ser exibida, frustando o internauta.

Docente: Ana Carvalho

7

Escola Secundária de Bombarral

Ligações com outros documentos Links Externos Uma das principais atrações da Internet é a apresentação de documentos com o conceito de hipertexto - ou seja uma página que se liga a outras por meio de conexões especiais chamadas hiperlinks. Com esse conceito, você pode criar documentos que façam referência a outros, e permitam ao usuário acessar essas referências, não importando se estão em outra página da Web, no seu micro ou em qualquer outro servidor da rede. Para dominar o uso do hipertexto, o programador HTML deve conhecer bem o funcionamento de dois comandos da linguagem: A HREF e A NAME. Este último estudaremos mais tarde. O comando usado para criar um hiperlink é basicamente: Texto ou imagem O que é URL? URL é a abreviação de Uniform Resource Locator e serve para especificar o endereço de uma Home Page. É composta de duas partes principais. A primeira é o protocolo Internet do documento e a segunda é o endereço do servidor e da página. A sintaxe é: protocolo://servidor.arquivo Protocolo é o tipo de servidor que está sendo acessado. Pode ser http, ftp, goupher, etc. Servidor é o computador que contém a página e arquivo. Pressupõe o caminho completo do arquivo. Tomando como exemplo a minha página pessoal temos como URL: http://www.vasy.com/dicas/index.html. Onde http é o protocolo http://www.vas-y.com/dicas/ é o servidor, e /Copacabana/2036/index.html é o campinho (path) do arquivo. Este edereço também pode ser escrito na linha de URL do Browser, para acessar diretamente a página.

No exemplo baseado no arquivo código-fonte abaixo mostramos a utilização desse recurso:

Docente: Ana Carvalho

8

Escola Secundária de Bombarral

O conceito de hipertexto, permite que você crie documentos que façam referência a outros. Caso você queira conhecer a Home Page do webmaster e criador desse tutorial basta clicar na palavra grifada. Ou então clicar na figura abaixo. Ao invés de mandar o usuário para uma outra Home Page você pode permitir que ele envie um e-mail para qualquer pessoa. Basta usar a opção mailto:nome@endereco no lugar da URL. Clique aqui para retornar a página anterior Uma dica: Para omitir a borda da figura basta colocar a opção BORDER=0 dentro da tag : Esta opção é usada nas setas e no Logotipo (abaixo) deste tutorial.

Links Internos Fazer ligações de textos com páginas locais é uma tarefa bem mais simples. Basta você indicar o nome completo do arquivo que será chamado com o comando H HREF. Veja por exemplo esse tutorial que é composto por várias páginas: Para ligarmos esse texto com o da última lição bastou indicar o nome do arquivo no comando A HREF: esse

Docente: Ana Carvalho

9

Escola Secundária de Bombarral As vezes é necessário ligar arquivos que estão em outros diretórios. Ainda tomando como exemplo este turtorial, para ligarmos este ponto com o exemplo baseado no código fonte a baixo, tivemos que indicar além do nome do arquivo, o dirtetório em que ele se encontra:

este ponto Exemplos de links locais (no mesmo Reparando no código-fonte ao lado servidor) notaremos, que ao invés de indicar o nome Aqui volta para do diretório onde estão os arquivos o indice geral
index.html e links-int.htm, que segundo a Aqui volta figura acima deveria ser html, usamos ../. para a lição "links internos" Isto porque o exemplo ao qual o códigofonte refere-se está no subdiretório exemplo, e se ao invés de colocarmos ../, colocassemos html/ estariamos dizendo que as páginas sitadas estariam no subdiretório html do diretório exemplo. Então, quando colocamos ../, estamos indicando o diretório que está a "um nível" abaixo do diertório atual.

Ligações no mesmo documento Para interligar partes de uma página é necessário criar uma âncora no ínicio de cada seção. Âncora é um ponto de referência que será acessado pelo link. É usada dentro de um documento para marcar o ínicio de uma seção. Cada âncora (um mesmo documento poder ter várias) recebe um nome que será mensionado pelo link que a acessará: O comando usado para criar uma âncora é: texto Para criar um link para essa âncora você deve usar o comando A HREF, especificando a âncora que você deseja acessar. Então a sintaxe completa para acessar a âncora acima é: texto a ser clicado O símbolo # avisa para o browser para procurar o link no documento especificado. Quando você clica no hipertexto, ele exibe a parte do documento que contém a âncora, colocando-a, sempre que possível, no alto da tela. Mas nem sempre o browser consegue posisionar o trecho que contém a âncora acionada no topo da tela. Isso ocorre principalmente quando este está no fim do documento, ou então, quando o documento não consegue preencher uma tela.

Docente: Ana Carvalho

10

Escola Secundária de Bombarral

Listas Listas de Definição Existem basicamente três tipos de listas. As listas numeradas, não numeradas e a lista de definição. Vamos começar pela última. A lista de definição é bastante usada quando você deseja tabular um paragrafo a direita destacando-o do restante do texto. O comando que gera esta lista é o , o qual deve envolver do primeiro ao último item da lista. Cada item deve ser "mensionado" após o comando e "esplicado" após o comando . É este último, alias, que é responsavel pela tabulação do paragrafo. Termo a ser definido Definição Listas de Definição A lista de definição é bastante usada quando você deseja tabular um paragrafo a direita destacando-o do restante do texto. Veja um exemplo da utilização desse comando baseado no código-fonte acima.

Listas não Numeradas Criar uma lista não numerada em HTML é uma tarefa bastante simples. Os comandos e são usados para "abrir" e "fechar" a lista, eles devem envolver do primeiro ao último item da lista. Cada item deve ser específicado após o comando (Line Item).

Docente: Ana Carvalho

11

Escola Secundária de Bombarral Veja um exemplo da utilização desse comando baseado no código-fonte acima. Note que o browser Primeiro Item da Lista Segundo Item da Lista mostra um marcador (símbolo) para cada item. Terceiro Item da Lista

É possível, e bastante util, criar estruturas hierárquicas (vários níveis) para a lista. Isso é possível quando se abre uma lista dentro de outra. Veja o exemplo abaixo. Note que nesse caso, o browser mostrou um marcador diferente para cada nível. Este é o primeiro item da lista principal Este é o primeiro sub-item da lista principal Este é o segundo sub-item da lista principal Este é o segundo item da lista principal Este é o terceiro item da lista principal

Listas Numeradas Assim como listas não numeradas, criar uma lista numerada também é uma tarefa bastante simples. Os comandos e são usados para "abrir" e "fechar" a lista, e devem envolver do primeiro ao último item da lista. Cada item também deve ser precedido do comando .

Docente: Ana Carvalho

12

Escola Secundária de Bombarral O código-fonte ao lado é um bom exemplo da utilização desse comando. Primeiro Item da Lista Segundo Item da Lista Terceiro Item da Lista

Também é possível misturar listas de definição, numerada e não numerada. Para isso basta "abrir" uma lista dentro de outra. Veja o exemplo abaixo. Exemplo de lista misturadas Primeiro Item da Lista Primeiro item da Lista de Definição Primeiro item desta lista não numerada Segundo item desta lista não numerada Terceiro item desta lista não numerada Segundo Item da Lista Segundo item da Lista de Definição Primeiro item desta lista numerada Segundo item desta lista numerada Terceiro item desta lista numerada Qaurto item desta lista numerada Terceiro Item da Lista Terceiro item da Lista de Definição Primeiro Item desta lista numerada Primeiro item desta lista não numerada Segundo item desta lista não numerada Segundo Item desta lista numerada Primeiro item desta lista não numerada

Docente: Ana Carvalho

13

Escola Secundária de Bombarral

Recursos Gráficos Imagens Gif ou JPG ? Para alguns tipos de imagens, o formato GIF é superior em qualidade de imagem, tamanho de arquivo, ou ambos. O que precisamos saber é para que tipo de imagens devemos aplicar JPG. De maneira geral, JPG é melhor aplicado a imagens com variações de cor - fotografias digitalizadas, por exemplo - coloridas ou com no mínimo 16 níveis em tons de cinza. Quanto mais complexa a imagem, melhor o resultado com JPG. Nos exemplos abaixo temos imagens "tratadas" Ulead Photo Explorer nos dois formatos que os Browsers aceitam. Repare no primeiro exemplo, que este é um caso de imagens complexas, com grande variação de cores. Por isso, o formato .jpg é superior aos demais. Ele consegue uma resolução igual ou superior à do formato .gif - Index Color Mode - mas, mantendo um arquivo pequeno (apenas 32 K).

Docente: Ana Carvalho

14

Escola Secundária de Bombarral

Gifs 39a Export Filter Adaptive System 256 Cores 256 Cores

Index Color Mode JPG Adaptive Hight 256 Cores

71 K

60 K

54 K

32 K

Máxima

Boa

Média

Má mesmo

187 Kb

33 Kb

20 Kb

9 Kb

GIF é melhor para imagens com cores lisas (bordas, áreas com cores "puras") realizando, nesses casos, uma compressão muito melhor do que JPG faria. Nestes casos, JPG produz imagens desfocadas. Por isso, imagens em preto-e-branco puros (sem tons de cinza) não devem ser processados em JPG. Gifs 39a Export Filter Index Color Mode JPG Adaptive System Adaptive Hight 256 Cores 256 Cores 256 Cores

71 K 54 K 60 K 32 K Agora repare na diferença da qualidade e do tamanho das imagens do exemplo abaixo. Concluimos então que, quanto mais simples for a imagem, melhor o seu resultado no formato .gif. Gifs 39a Export Filter Index Color Mode JPG Adaptive System Adaptive Low 6 Cores 6 Cores 6 Cores

8K

Docente: Ana Carvalho

8K

9K

23 K

15

Escola Secundária de Bombarral

Gifs Transparentes

Você já deve ter visto inumeras imagens, que se confundem com o fundo da página, dando a impressão que o seu fundo é igual ao da página. Um bom exemplo é o logotipo desse Guia. Essas imagens são os "Gifs Transparentes" - isto é, imagens armazenadas em arquivos .gif, com a aplicação de uma extensão gráfica que deixa uma determinada cor transparente na apresentação da imagem. No exemplo abaixo você tem duas imagens onde na primeira não foi usado o recurso de transparência e na seguna a cor cinza foi "escondida". O processo para se construir um "Gif transparênte" é bastante simples. Para quem tem windows basta usar o programa LView. Supondo que você já esteja com o LView instaldo em seu micro, o processo (passo-apasso) para criar um "gif transparente" é: Abra a imagem que recebera o efeito de transparência; Escolha, no menu Retouch, a opção Background Color Uma janela como a exibida ao lado se abrirá; Escolha na paleta de cores, a cor que será "escondida". Não esqueça de deixar a opção Mask selection using ativada. Esta opção faz com que uma máscara em branco ou preto seja ativada; essa máscara nos mostra quando a cor escolhida é adequada para o efeito que pretendemos. Escolhido o cor, clicar em OK; Finalmente, gravar a imagem como GIF89a OBS: Se não tiver sucesso, provavelmente será porque o fundo original da imagem não tem uma cor lisa. Utilizando um bom programa gráfico e ampliando a imagem, você notará que se trata de uma única cor em vários tons. A solução é pintar esse fundo com um único tom de cor.

Gifs Animados Antes de saber como construir um Gif Animado é preciso saber o que é. Um Gif Animado não passa de várias imagens no formato .gif postas em sequência. A linguagem HTML não é capaz de produzir tal efeito de animação, para isso é necessário um programa específico. O mais conhecido é o GIF Construction. Para entender melhor como funciona um "Gif Animado" veja a seguinte sequência de imagens:

Docente: Ana Carvalho

16

Escola Secundária de Bombarral Essas 4 imagens são colocadas em sequência (1, 2, 3, 4, 3, 2, loop), criando assim o efeito de animação...

Antes de inundar suas páginas de animações, lembre-se de que, ao usar a rede, a velocidade de transmissão das imagens é muito pequena. Por tanto uma imagem pode levar vários minutos para ser exibida, frustando o internauta.

Imagens Clicáveis Existem básicamente dois métodos para a criação de mapas. Um deles, o Server-Side Imagemap, utiliza a comunicação com o servidor HTTP. Nesse método, o documento HTML busca informações em outros arquivos (geralmente de extensão .map ou .conf). Dentro desses arquivos estão as coordenadas e os links a elas relacionados. No outro método (Client-Side Imagemap), essas coordenadas são declaradas dentro do arquivo HTML, e por isso são rastreadas pelo browser no momento em que o usuário escolhe um ponto na imagem. Dessa forma, o servidor já recebe uma requisição de um documento, pois as coordenadas do ponto escolhido e o arquivo correspondente já foram identificados pelo browser. Essas coordenadas são encontradas, através de programas de manipulação de imagens como por exemplo o LView. Existem também programas que geram automáticamente essas coordenadas e atribuem a elas o endereço URL que você estipular. Um desses programas é o MapThis. Ele permite que você selecione a área desejada através das ferramentas circulo, retângulo ou polígono e indique o endereço a qual aquela área esta relacionada. Depois ele cria automáticamente o documento-fonte no formato em que vôce preferir. Como já mensionamos antes, neste último método, o mapa é declarado dentro do documento HTML. O conjunto de comando responsáveis pela criação deste mapa estão exemplificados abaixo: Neste exemplo, usamos a opção rect e circle no comando AREA SHAPE, mas existe ainda a opção POLY: um polígono; cada coordenada declarada é um vértice; No exemplo as coordenadas declaradas são, respectivamente, do vértice esquerdo superior e vértice direito inferior de um retângulo. O resultado seria o mapa clicável abaixo:

Docente: Ana Carvalho

17

Escola Secundária de Bombarral

Avançado Cor&Arte O Comando Body Até agora o comando BODY foi mencionado em seus documentos html sem nenhum de seus atributos, assumindo assim, apenas seus valores padrões. Talvez por isso, tenha sido difícil entender a importância desse comando. É ele que controla, através dos atributos mostrados abaixo, as cores de fundo e do texto normal; do link ativo, visitado e não visitado. Os atributos são: BGCOLOR : Controla a cor de fundo (segundo plano) da página LINK : Controla a cor dos links não visitados VLINK : Controla a cor dos links visitados ALINK : Controla a cor que o link assume ao ser clicado. Veja o efeito causado pela linha de comando abaixo.

Papel de Parede (Background) Além de permitir que você escolha cores para o texto, links, fundo... a tag BODY permite, através do atributo BACKGROUND, transformar uma imagem em papel de parede. O fundo desse guia é um bom exemplo da utilização desse comando. A sintaxe básica para conseguir esse efeito é: "Navegando" pelas páginas na internet você iria encontrar diversas imagens para fazer seu background. Mas cuidados devem ser tomados, não é qualquer imagem que pode ser usada. Imagens escuras dificultam a leitura do texto, mesmo que este esteja em cores claras como branco. Para ver os exemplos abaixo, clique na imagem...

Docente: Ana Carvalho

18

Escola Secundária de Bombarral

O Comando FONT Você já sabe como colocar um texto em negrito, itálico, sublinhado, etc... Mas em nehuma das opções vistas até agora vimos como alterar o tipo, tamanho e cor da fonte. As opções de cabeçalho (H1, H2...) e o comando BODY, até que produzem tais efeitos, mas com uma certa limitação. A tag , somada aos atributos listados abaixo produzem esse efeito com grande facilidade. FACE : Indica o tipo de fonte a ser usada (Times New Romam, Arial, Courier, etc.) SIZE : Controla o tamanho da fonte. Os valores variam de 01 à 07. COLOR : Controla a cor do texto A sintaxe completa desse comando é: Texto qualquer Com o comando FONT você pode alterar o tamanho, cor, ou tipo da fonte. Nada impede que você altere tudo Veja um exemplo da utilização desse comando baseado no código-fonte acima.

Tabelas Tabelas As tabelas têm uma estrutura parecida com a de uma planilha eletrônica: compõe-se, basicamente, de linhas e colunas, cujas interseções formam o que se chama de células. Uma célula pode conter um texto simples, um hipertexto ou até mesmo uma imagem. A tabela é criada pelos comandos e . Entre eles devem ser especificadas as tags responsáveis pela criação das linhas e células. A tag responsável pela criação das linhas é: (Abreviação de Table Row). Se uma tabela tiver cinco linhas, deveram ser indicados cinco desses comandos As tags usadas para especificar o conteúdo de uma célula é a abreviação de Tabel Data, e . Para cada célula da linha deve ser usado esse comando. Devem ser usadas depois de cada comando .

Docente: Ana Carvalho

19

Escola Secundária de Bombarral As tags e , abreviação de Table Header, tem a mesma função das tags TD, só que o texto é exibido em negrito e centralizado. Ao lado, temos um exemplo bem simples da utilização desses comandos. Note que existe um atributo BORDER=1 na tag . Esse atributo cria uma borda na tabela. O padrão é que a borda não seja exibida.

1 1

Coluna Coluna

1 2

2 2

Coluna Coluna

1 2

Atributos da Tabela O comando tem uma série de atributos que controlam desde a cor da borda até o alinhamento da tabela em relação ao texto. Os principais atributos são: ALIGN : determina o alinhamento da tabela. Pode ser left, right ou center WIDTH : determina a largura da tabela. Os valores podem ser dados em pixels ou porcentagem em relação ao tamanho da janela. HEIGHT determina a altura da tabela. Os valores podem ser dados em pixels ou porcentagem em relação ao tamanho da janela. BORDER determina a espessura da borda (grade) da tabela. BGCOLOR determina a cor do fundo da tabela Existem outros atributos como BORDERCOLOR, BORDERCOLORLIGHT e BORDERCOLORDARK que controlam o sistema de cores da borda da tabela Veja um exemplo, baseado no código-fonte a baixo, da utilização desses atributos. Linha 1 Coluna 1 Linha 1 Coluna 2 Linha 2 Coluna 1 Linha 2 Coluna 2

Docente: Ana Carvalho

20

Escola Secundária de Bombarral

Tabelas Complexas As vezes é necessário que uma célula ocupe mais de uma linha ou coluna. Isso é possível com inserção de dois atributos nas tags ou . Esse atributos são: COLSPAN : Especifica quantas colunas da tabela a célula pode ocupar ROWSPAN : Especifica quantas linhas da tabela a célula pode ocupar Também existem atributos como ALIGN e VALIGN que controlam o alinhamento horizontal e vertical da célula e NOWRAP que indica que o texto da célula não pode ser quebrado para se ajustar ao tamanho da tabela. Veja um exemplo, baseado no código-fonte ao lado, da utilização desses atributos.

Docente: Ana Carvalho

1998 5 BIMESTRE 6 BIMESTRE Setembro Outubro Novembro Dezembro 1998 1 BIMESTRE 2 BIMESTRE Janeiro Fevereiro Março Abril

21

Escola Secundária de Bombarral

Frames O Domínio das frames Logo que comece a desenvolver um site mais avançado, precisa de assegurar-se que os seus leitores podem navegar facilmente no seu interior. As frames e o javascript são a resposta a esta necessidade. A maioria dos sites que consultamos actualmente possuem frames. A maioria das pessoas têm a versão 3 ou acima de um browser, o que significa que podemos, com alguma certeza, presumir que a maioria dos leitores estão aptos para as frames, mas afinal, o que é que estas têm realmente para lhe oferecer ? As frames permitem dividir a janela do browser em secções e exibir uma página de HTML diferente em cada secção. A vantagem é a de que quando uma ligação é seguida numa frame, as outras não precisam de ser recarregadas. Desta forma poderá criar uma frame ou um índice para todo o site, e este pode permanecer constante - para conseguir isto numa única página de HTML tem de copiar o índice para todas as páginas e depois utilizar a "preciosa" largura de banda que envia a mesma informação uma r outra vez. Contudo, o que as frames têm de espectacular é que pode controlar outras frames a partir de outra frame utilizando HTML e JavaScript. Isto significa que poderá ter uma frame com um índice estático a controlar todas as outras e nâo sem ter de se preocupar porque poderá até mudar a configuraçâo das páginas no seio da janela do browser tal como necessitar. Elabore a sua frame As frames sâo, na verdade, muito fáceis de usar. Tudo o que necessita sâo as páginas HTML que irá exibir no interior das frames e depois uma página adicional HTML que conterá o código para abrir as janelas como deve ser. Quando criar as páginas que vâo para dentro do conjunto da frame, lembre-se de que estas páginas serâo vistas dentro de um espaço de ecrâ relativamente reduzido devido às outras frames, pelo que deverá concebê-la tendo isto em consideraçâo. Uma boa forma de trabalhar é decidir a forma como irá conceber o seu site na resoluçâo minima de ecrâ. Em termos gerais, vâo existir cerca de 50% de pessoas a 800 x 600 e cerca de outros 50% a 1024 x 768 em termos de resoluçâo de ecrâ, e os restantes com algumas resoluçôes inferiores ou superiores. Fará, entâo, sentido conceber para 800x600 e depois ver como ficam as coisas a 1024x768. Para este propósito terá de presumir que a janela do browser está maximizada porque de outra forma nâo terá qualquer ideia relativamente aos tamanhos com que terá de lidar.

O que são frames ? Frame nada mais é do que uma extensão do HTML que permite que a janela do browser seja dividida em várias regiões - os frames. Cada uma destas regiões podem conter documentos totalmente distintos e independentes. Quando utilizamos frames, é necessário a criação prévia de um documento HTML, que irá definir em quantas regiões será dividida a janela do seu browser, qual será o tamanho e quais serão os documentos carregados em cada uma delas.

Docente: Ana Carvalho

22

Escola Secundária de Bombarral Repare bem no resultado do exemplo ao lado de uma frame vertical. O código-fonte é um pouco diferente dos arquivos que você esta acostumodo a criar. O comando comum em todas os arquivos HTML criados até agora, foi substituído pelo comando , que é o responsável pela criação dos frames.



Repare também que dentro deste comando temos um atributo que define: Tipo de divisão desejada - em colunas (vertical) ou em linhas (horizontal). COLS e ROWS respectivamente. Os valores desse atribuots podem ser dados em pixels ou, como mostra o exemplo, em porcentagem. O sinal "*" funciona como um coringa. A quantidade de valores especificados entre vírgulas, determina o número de divisões na tela. Para cada frame definido em , é necessário a utilização de um comando . É neste comando que vamos dizer o que será carregado em cada uma das divisões. Esse comando possui basicamente dois atributos: SRC: define o arquivo que será carregado no frame; NAME: define o nome do frame, ou apelido, e pode ser muito necessário quando, por exemplo, você quiser

Docente: Ana Carvalho

23

Escola Secundária de Bombarral que o conteúdo de um link que esta em um certo frame, apareça em outro. Finalmente, e baseado sobre o mesmo principio, você pode ver o código de uma frame horizontal "rows". Veja o exemplo...

Docente: Ana Carvalho



24