HTML (HyperText. Markup Language)

Transcrição

1 Pontifícia Universidade Católica do Rio Grande do Sul PUCRS Faculdade de Informática HTML (HyperText Markup Language) Prof. Fabiano Passuelo Hessel Profª. Leticia Lopes Leite Julho de 2002.

2 1. Introdução A linguagem HTML (Hypertext Markup Language - Linguagem de Marcação de Hipertexto) é utilizada na criação de páginas divulgadas na World Wide Web. O HTML utiliza marcações, chamadas tags, para especificar as definições da página (tipos de fonte, tamanho, inserção de figuras e links para outras páginas). Cada tag informa ao visualizador (browser) como o texto, figuras e demais recursos devem ser apresentados. Da mesma forma que em qualquer outra linguagem, o programador deve escrever o código-fonte seguindo determinadas regras de sintaxe. Este códigofonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos ou tags do código para formatar e acessar recursos da Web. A edição do código-fonte pode ser realizada através de um editor de texto comum, ou ainda por intermédio de ferramentas gráficas que facilitam este processo. No âmbito do curso, será utilizada a ferramenta chamada 1st page, por ser completa, fácil e de distribuição gratuíta (freeware). Mandamentos e Pecados na Construção de Páginas 10 pecados capitais 1. Não altere o propósito. 2. Não confunda o visitante, o site precisa ter um design consistente, nas seções e páginas diferentes. 3. Não confunda o visitante, não use links inúteis. 4. Não faca páginas de tamanhos exagerado. 5. Não crie páginas que exijam rolagens. 6. Não use ilustrações grandes, lentas para carregar. 7. Evite ao máximo a tentação de usar muitas cores. 8. Não use sombras de fundo esfumaçadas. 9. Não use textos extensos (a única pessoa que, com certeza, lerá cada palavra do que você escreveu, é a sua mãe). 10. Nunca use tipos excessivamente pequenos 10 mandamentos 1. Ofereça conteúdo em todas as páginas. O design não deve ser meramente decorativo; precisa, antes de tudo, transmitir informação. 2. A primeira cor é o branco. 3. A segunda cor é o preto. 4. A terceira cor é o vermelho. O branco para o fundo, o preto para o tipo sobre o fundo branco e o vermelho sobre qualquer uma das outras. 5. Nunca distancie as letras minúsculas.

3 6. Nunca use uma grande quantidade de texto em maiúsculas. 7. A capa deve ser um poster (atrai mais pessoas ao website, do que várias imagens ou somente texto). 8. Use apenas uma ou duas famílias de tipos. A melhor combinação de duas fontes é: uma leve e uma em negrito. 9. Faca tudo o maior possível. 10. Seja imprevisível Texto retirado de 2. Os Comandos Básicos do HTML (Tags) Os comandos do HTML são chamados de tags e são identificados pelos sinais < > e </ >. Sendo que entre os sinais < > é identificado o nome da tag a ser utilizada, sendo assim seu formato é o seguinte: <nome_da_tag> </nome_da_tag> As tags que indicam o início e final de um documento HTML são respectivamente: <HTML> </HTML> O HTML trabalha com o documento dividido basicamente em 2 partes: Cabeçalho - contém parâmetros de configuração do documento. É definido pela tag: <HEAD> </HEAD> Corpo - contém a definição dos recursos que compõem o documento. É definido pela tag: <BODY> </BODY> A Tag HEAD Dentro do cabeçalho deve ser definido o título do documento para o browser (visualizado na barra de títulos), utilizando a seguinte tag: <TITLE> Título da Página </TITLE>

4 Exemplo da estrutura do documento: <HTML> <HEAD> <TITLE> Título da página </TITLE> </HEAD>... No 1 st Page ao criar um novo documento HTML, as tags <HTML>, <HEAD>, <TITLE>, <BODY> assim como seus finalizadores são automaticamente inseridos. Inicialmente o título mostrado é Untitled, sendo então necessário para trocá-lo clicar duas vezes sobre a palavra e, digitar o novo título. A Tag BODY Dentro do corpo do documento serão colocados todos os comandos referentes a textos, imagens e objetos pertencentes a página. Ele é definido pela seguinte tag:

5 <BODY> </BOBY> Exemplo da estrutura do documento: <HTML> d o c u m e n t o cabeçalho corpo <HEAD> <TITLE> Título da página </TITLE> </HEAD> <BODY> </BODY> Definições do documento </HTML> Formatação do Background (fundo) A cor de fundo da página pode ser especificada pela tag: <BODY BGCOLOR = "blue"> * Ver tabela de cores ao final da apostila. Inserindo uma imagem ao Background Para inserir uma imagem no background da página sugere-se a utilização do formato.gif. Entretanto também é possível a utilização de outros formatos, tais como:.jpg e.bmp. A tag utilizada é a seguinte: <BODY BACKGROUND= caminho > Definição de toda a página </BODY> Observações: * Caso a imagem seja pequena, esta será replicada por todo o background da página. ** É importante que a figura de fundo não prejudique a visualização do restante da página. <BODY BACKGROUND="c:\imagem\mesa.gif">

6 No 1st Page as modificações de cor e textura do background do documento podem ser editadas da seguinte forma: 1. Menu Format 2. Opção Document Properties Será visualizada a janela a seguir: Cor do Fundo Inserção de Imagem 3. Pressionar o botão OK Títulos e Sub-Títulos da Página A demarcação de títulos e sub-títulos de uma página é feita através de tags de header <H> seguida de um número que pode variar de 1 até 6 (sendo que 1 é o tamanho maior e 6 é o menor). Esse comando é utilizado para identificar, por exemplo, o começo de uma seção ou tópico, facilitando a visualização dentro da página. Sempre que se utilizar esta tag, a fonte será padronizada em negrito e em determinado tamanho, além da inserção de uma linha em branco após o texto. <H1> Parágrafo 1 </H1> Visualização: Parágrafo 1

7 <H6> Parágrafo 6 </H6> Visualização: Parágrafo H6 No 1st Page você deverá digitar as tags de início e finalização par demarcação de títulos e sub-títulos. Tarefa: Crie a sua página Web pessoal utilizando os recursos de Html vistos. Formatação de Textos O texto apresentado em uma página pode ser formatado utilizando efeitos do tipo negrito, itálico, sublinhado, etc, da mesma forma que é feito em editores de texto comuns. A seguir temos uma tabela que apresenta as tags utilizadas para este tipo de formatação: Estilo Tag Negrito <B> texto </B> Itálico <I> texto </I> Sublinhado <U> texto </U> Subscrito <SUB> texto </SUB> Sobrescrito <SUP> texto </SUP> Marquee <MARQUEE> texto </ MARQUEE > Pulsante <BLINK> texto </ BLINK > Formatação de Fonte A tag FONT permite que sejam definidos cor (COLOR), tipo (FACE) e tamanho (SIZE) da fonte de um texto. Uma dica importante é sempre utilizar as fontes padrão do Windows, sob pena da página não ser visualizada de maneira adequada em máquinas que não tenham a mesma fonte instalada. Lembre-se que o tamanho da fonte deve seguir o padrão de hipertextos, ou seja, utilizando os tamanhos de 1 a 6. Para aumentar seu tamanho utilize o sinal de + e para diminuir o de seguido do número. <FONT FACE= Times > Texto </FONT> <FONT SIZE= +4 >Texto </FONT> <FONT COLOR= red > Texto </FONT>

8 Todos esses complementos de tag podem ser usados juntos dentro de uma só definição, da seguinte forma: <FONT FACE= times size= +4 COLOR= red > Testando </FONT> * Quando a tag COLOR for utilizada, deve-se especificar a cor desejada em inglês ou em código. Os browsers disponibilizam até 256 cores para serem usadas como cor de fundo, sendo que cada cor é formada por um código RGB (red/green/blue). O código é composto por três números nos quais os primeiros dois dígitos representam a intensidade do vermelho (R); o segundo, a intensidade do verde (G) e o último a intensidade do azul (B). Cada cor pode ter um valor que varia de 0 a 255. Se forem atribuídos os valores mínimos R=000, G=000 e B=000, é obtida a cor preta. Se forem atribuídos o valor máximo para cada cor (255), é obtida a cor branca. ** Ver tabela de cores ao final da apostila. Tarefa: Insira, manualmente, na sua página Web um texto com as formatações apresentadas anteriormente. No 1st Page a formatação do texto é realizada por intermédio do menu Format, seguindo os passos descritos abaixo: 1. Menu Format 2. Opção Font A janela a seguir será apresentada. Tipo da Fonte Cor da Fonte Efeitos 3. Pressionar o botão OK

9 Tarefa: Insira um texto na sua página Web utilizando os recurso de formatação de texto e de fonte do 1st page. Formatação do Alinhamento do Texto A formatação do alinhamento de um texto é feita utilizando-se as seguintes tags: Estilo Tag Centralizado <CENTER> Texto </CENTER> Justificado <JUSTIFY> Texto </JUSTIFY> Esquerdo <LEFT> Texto </LEFT> Direito <RIGHT> Texto </RIGHT> Sintaxe do comando: <DIV ALIGN= center > Texto </DIV> Parágrafos Diferentemente dos editores de texto, o HTML somente reconhecerá um novo parágrafo através de uma marcação adequada, isto é, através da tag <P>. Sua finalização é definida com o </P>. <P> Minha primeira página está sendo desenvolvida. </P> *Esta tag permite também a utilização do parâmetro ALIGN que define o alinhamento horizontal, da mesma forma que as tags apresentadas na tabela anterior. <P ALIGN= center > Testando </P> Quebra de Linha A quebra de linha em HTML é utilizada quando é definida através da tag <BR>. Este nome vem da palavra break quebrar. A diferença entre as tags <P> e <BR> é que no primeiro caso ocorre a inserção de uma linha em branco antes do parágrafo; enquanto no segundo a continuação do texto se dá na linha seguinte a quebra. Tarefa: Inserir um texto em sua página Web com formatação do alinhamento do texto, parágrafo e quebra de linha.

10 Comentários Os comentários são utilizados como forma de explicar o documento HTML criado. O conteúdo que estiver entre a tag de comentário, não será apresentado no browser. A tag que define o comentário é:  Linha Horizontal A criação de uma linha horizontal é feita, por exemplo, para dar destaque a títulos ou para gerar a sensação de quebra entre um item de informação e outro. A tag utilizada para esta função é a <HR>, mas devem ser definidas algumas características referentes ao seu tamanho e espessura. <HR SIZE="2" WIDTH="50"> Onde: SIZE define a largura WIDTH comprimento (pode ser definido em porcentagem %) Interligando documentos Dentre as características dos documentos HTML uma das que mais se destaca é a possibilidade de definição de vínculos entre documentos, chamados links, hipertextos ou hiperlinks. Eles permitem que se façam referências a outros documentos e/ou partes de um mesmo documento. Os links existentes em uma página, normalmente, estão com uma cor diferente do restante do texto e, ao passar com o mouse sobre o mesmo, o cursor se transforma em uma mão. Âncoras A âncora é um endereço ou ponto de referência a ser visualizado quando o link for clicado. Uma âncora pode ser utilizada dentro de um documento para especificar o início de uma seção. A tag utilizada para representar uma âncora é a <A> </A>.

11 Criando Âncoras para Outros Documentos Para criar uma âncora para outro documento siga os passos descritos abaixo: 1. Verifique o nome do documento de destino do link. 2. Digite: <A HREF= endereço_destino > Texto que deverá aparecer no link </A> <A HREF="docentes.html">Docentes</A> Criando Âncoras para URL s O HTML permite que através de um esquema de URL s (Uniform Resource Locators) sejam criados links com documentos localizados em outros servidores da Internet. A URL deve especificar a localização de páginas e arquivos em diretórios de servidores da Web. Uma URL é composta por duas partes principais. Protocolo Internet do documento Endereço do servidor e da página Onde o protocolo é o tipo de servidor que está sendo acessado, e o servidor é o computador que armazena a página. Para especificar a URL que se deseja acessar ao clicar em um link, utiliza-se também a tag <A>. Da seguinte forma: <A HREF = " Site de Pesquisa Google</A> Dessa forma temos que: site destino do link Site de Pesquisa Google Título do link Tarefa: Insira em sua página Web uma âncora para um documento e uma âncora para uma URL.

12 Criando Âncoras para Sessões de uma Página Este recurso é utilizado para ligar partes diferentes do mesmo documento HTML. Sendo assim o usuário poderá, ao clicar em um link, visualizar uma parte diferente da mesma página (sessão). A tag utilizada neste trabalho é também a <A>, da seguinte forma: 1. Definir o nome da sessão destino do link: <A NAME= nome_da_sessão_destino > </A> 2. Inserir o link para a sessão desejada. <A HREF= # nome_da_sessão_destino > Título do link </A> Tarefa: Inserir em sua página Web uma âncora para uma sessão de sua página.