Introdução_ao _HTML.pdf

Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto

Formador: Rui Pereira

Índice Introdução ao HTML.............................................................. ...................................................................................................................... ........................................................ 2 TAGS (Marcações) ( Marcações) e elementos .................................................................................................... .................................................................................................... 2 Estrutura básica de uma página em HTML ................................................................................... ................................................................................... 3 AS TAGS HTML, HEAD, TITLE E BODY ................................................................................ ........................................................................................... ........... 4 Definições de Carácter Entities .......................................................................................... ..................................................................................................... ........... 6 Os caracteres acentuados ............................................................................................................. ............................................................................................................. 7 Tags Elementares ........................................................................................................................ ........................................................................................................................ 11 Listas ............................................................................................................................................ ............................................................................................................................................ 13 Definição do fundo da página ..................................................................................................... ..................................................................................................... 18 Uso das Cores .................................................................................... .............................................................................................................................. .......................................... 24 Nomes de cores...................................................................... ........................................................................................................................... ..................................................... 25 Uso de imagens ....................................................................................................... ........................................................................................................................... .................... 30 HIPERLIGAÇÕES ....................................................................................................... ........................................................................................................................... .................... 35 IMAGE MAPS ............................................................................................................................... ............................................................................................................................... 40 Inserção de elementos multimédia............................................................................................. multimédia............................................................................................. 44 Tabelas ............................................................ ............................................................................................................................... ............................................................................ ......... 46 Molduras (frames).................................................................. ....................................................................................................................... ..................................................... 51 Planeamento de um site ............................................................................................................. 57

Governo da República Portuguesa

1



Introdução ao HTML A linguagem HTML significa HTML significa Hypertext Markup Language Language - linguagem de marcação de hipertexto. É uma linguagem universal destinada à elaboração de páginas com hipertexto, como o nome indica. O conceito de hipertexto é muito simples: certos itens de um documento contém uma ligação a outra zona do mesmo documento ou, como é mais vulgar a outros documentos. A principal aplicação do HTML é a criação de páginas da Web, e convém esclarecer que não se trata de uma linguagem de programação. programação. O HTML é uma espécie de linguagem de formatação, um ficheiro de texto que é formatado através de uma série de comandos designados por TAGS. TAGS. Para criar uma página HTML, não é necessário nenhum software especial. O Notepad do Windows é suficiente para a criação de uma página. Para testar a página é necessário um Browser (Netscape Communicator e/ou Microsoft Internet Explorer).

TAGS (Marcações) e elementos As Tags consistem do sinal (<), ( o símbolo de "menor que"), seguida pelo nome da marcação e fechada por (>) ("maior que"). Todas as tags de formatação devem ser abertas e fechadas. O símbolo que termina uma determinada tag é igual aquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente: EXEMPLO: Todas as tags obedecem a uma hierarquia, como no seguinte exemplo: - Correcto - Incorrecto O primeiro a abrir é o ultimo a fechar, e vice-versa.


2



Existem algumas excepções das tags: a tag que indica um final de parágrafo:
, não necessita de fechar:
. A tag que indica quebra de linha -
- também não precisa de fechar, e outras tais como
e
. A linguagem HTML não diferencia as maiúsculas das minúsculas ( não é Case Sensitive), pois se escrever uma tag como , , ou , o comando é o mesmo e os browsers vão interpretá-lo da mesma forma.

Estrutura básica de uma página em HTML Existem quatro pares de tags que devem ser sempre colocados na página. As tags e devem devem englobar todo o conteúdo da página (estar presente no início e no fim do texto) para indicar ao browser que se trata de um documento HTML. O documento, por sua vez, está dividio em duas partes: o cabeçalho e o corpo do texto, cada um indicado por tags diferente. Tudo que estiver entre e e irá compor o cabeçalho, não aparecendo na página. O elemento prinicpal do cabeçalho e o titulo do documento, que deve ser colocado entre e . . Por fim, existe o e e que que serve para indicar o corpo do texto. EXEMPLO: Cabeçalho do Documento

Corpo do Documento


3



AS TAGS HTML, HEAD, TITLE E BODY As tags e servem para indicar ao browser onde começa e termina um documento. As tags e determina os comandos que devem ser lidos antes de carregar o texto HTML, como por exemplo, métodos de abertura da página, linguagens incorporadas ao texto e o título da página. A utilização da tag HEAD é opcional, porém ferramentas de pesquisa como o Google utilizam esta tag como parâmetro para encontrar palavras-chave que identificarão um site. As tags que podem ser colocadas na parte HEAD são: base, link, meta, title, style, script. Base: define o URL do documento actual. Exemplo: Link: estabelece uma organização hierárquica para a navegação entre documentos. Exemplo: Meta: serve para definir os atributos identificadores do site como por exemplo o autor da página, os direitos de autor e as palavras-chaves. Sintaxe: <META NAME="[author/copyright/keywords]"CONTENT="[Valor do atributo]"> Exemplo: <META NAME="author"CONTENT="Paula Cardoso Alcobia"> Atributos: NAME - identifica o identificador que se vai adicionar à página, podendo ser:


4



- AUTHOR: autor da página; - COPYRIGHT: direitos de autor; - KEYWORDS. palavras-chave, utilizadas por ferramentas de pesquisa para conhecer o conteúdo do site. CONTENT - determina o conteúdo do identificador. Se um item possuir mais do que um identificador, então é necessário separá-los por virgulas. Exemplo: <META NAME="author"CONTENT="Paula Cardoso Alcobia"> <META NAME="copyright"CONTENT="Paula Alcobia"> <META NAME="keywords"CONTENT="API A. Curso Tecnológico de Informática, 11ºano, Aplicações Informáticas"> HTTP-EQUIV="REFRESH" Um recurso da tag Meta que determina um tempo em segundos, antes que o browser seja direccionado para a outra página. Exemplo: <META HTTP-EQUIV="REFRESH"CONTENT="5;URL=http://www.alcobias.net"> veja esta página por 5 segundos e depois verá o portal alcobia. TITLE - é o responsável por identificar o título da página, colocando na janela do browser, ou seja na barra de títulos. Sintaxe: [Título da página]


5



Exemplo: " .. -..-..-..Página Pessoal da Paula Cardoso Alcobia..-..-..-..

STYLE - define um estilo embutido na página Exemplo: Script - inclui scripts no documento. Estes são executados pela oredem que aparecem no documento. Exemplo: <SCRIPT LANGAUAGE="JavaScript">document.write("o meu primeiro script") As tags e delimitam o corpo do documento. Estas contém as tags e o texto que formam o conteúdo principal da página web, por exemplo, parágrafos, listas, imagens, hiperligações entre outros.

Definições de Carácter Entities Alguns caracteres têm um significado próprio para o html e por isso, são caracteres reservados, como, por exemplo o símbolo <. Para poder visualizar estes caracteres é necessário recorrer ao uso de carácter entities. O carácter entity é composto por:


6



- o E comercial (&), o nome ou número da entidade precedido de cardinal(#) e o símbolo ponto e virgula(;). Alguns caracteres entities: Visualização

< > & " ¢ £ ¥ €

§ © ® ™

Descrição

Espaço (non-breaking space) Menor que (less than) Maior que (greater than) E comercial (ampersand) Aspas (quotation mark) Cêntimo (de dólar) Libra esterlina (pound) Yen Euro Marca de secção Copyright Marca Registada (registered trademark) Marca Comercial (trademark)

Nome da entidade

Número da entidade

< > & " ¢ £ ¥ € § © ®

< > & " ¢ £ ¥ € § © ®

™

™

Os caracteres acentuados O HTML 4.01 suporta o conjunto de caracteres ISO 8859-1 (Latin-1) que contém os caracteres com acentos usados pelas línguas da Europa Ocidental. Os caracteres acentuados da língua portuguesa podem ser todos obtidos usando este conjunto de caracteres. Os caracteres da primeira metade do conjunto ISO-8859-1 (códigos desde 0 a 127) são os mesmos que os caracteres padrão ASCII de 7 BITs. A maior parte destes caracteres pode ser usada directamente sem necessidades de recorrer a entidades porque estão sempre disponíveis em todas as maquinas qualquer que seja a sua configuração. Os caracteres finais do conjunto ISO-8859-1 (códigos desde 160 até 255) podem ser usados recorrendo a nomes de entidade de carácter definidos em HTML.


7



Nota. os nomes das entidades são sensíveis ao tipo de letra (maiúscula ou minúscula).

Entidades para caracteres do conjunto ISO 8859-1 (não ASCII) Resultado Descrição

¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬

® ¯ ° ± ² ³ ´ µ ¶ · ¸

Inserir um espaço sem mudar de linha (non-breaking space) Ponto de exclamação invertido Cêntimo(de dolar) Libra esterlina Dinheiro Yen Barra vertical descontinua Secção Acento diaeresis(trema metafonia) Direitos de cópia (copyright) Ordinal feminino Abertura de aspas angulares Negação Hífen "soft" (Pode acontecer uma quebra de linha junto ao hífen. Marca registada Sinal (acento) Graus Mais ou menos 2 Sobrescrito 3 Sobrescrito Acento agudo Micro Parágrafo Ponto a meia altura Cedilha

Nome da Entidade

Código Numérico

¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬

¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬

® ¯ ° ± ² ³ ´ µ ¶ · ¸

® ¯ ° ± ² ³ ´ µ ¶ · ¸


8



¹ º » ¼ ½ ¾ ¿ × ÷

Resultado

À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö

Sobrescrito 1 Ordinal masculino Fecho de aspas angulares (right) Fração 1/4 Fração 1/2 Fração 3/4 Ponto de interrogação invertido Multiplicação Divisão

Descrição

capital a, grave accent capital a, acute accent capital a, circumflex accent capital a, tilde capital a, umlaut mark capital a, ring capital ae capital c, cedilla capital e, grave accent capital e, acute accent capital e, circumflex accent capital e, umlaut mark capital i, grave accent capital i, acute accent capital i, circumflex accent capital i, umlaut mark capital eth, Icelandic capital n, tilde capital o, grave accent capital o, acute accent capital o, circumflex accent capital o, tilde capital o, umlaut mark

¹ º » ¼ ½ ¾ ¿ × ÷

Nome da entidade


¹ º » ¼ ½ ¾ ¿ × ÷

Número da entidade



9



Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø ù ú û ü

capital o, slash capital u, grave accent capital u, acute accent capital u, circumflex accent capital u, umlaut mark capital y, acute accent capital THORN, Icelandic small sharp s, German small a, grave accent small a, acute accent small a, circumflex accent small a, tilde small a, umlaut mark small a, ring small ae small c, cedilla small e, grave accent small e, acute accent small e, circumflex accent small e, umlaut mark small i, grave accent small i, acute accent small i, circumflex accent small i, umlaut mark small eth, Icelandic small n, tilde small o, grave accent small o, acute accent small o, circumflex accent small o, tilde small o, umlaut mark small o, slash small u, grave accent small u, acute accent small u, circumflex accent small u, umlaut mark




10



ý þ ÿ

small y, acute accent small thorn, Icelandic small y, umlaut mark

ý þ ÿ

ý þ ÿ

Tags Elementares Cabeçalhos No corpo do texto podem ser colocados até seis níveis de cabeçalhos. A hierarquia começa em
, como o maior cabeçalho, e termina em
, como o menor. Os cabeçalhos
e
aparecem tão pequenos no browser que provavelmente nunca serão usados. Exemplo:
isto é um cabeçalho isto é um cabeçalho

isto é um cabeçalho



O HTML adiciona de forma automática uma linha em branco antes e depois de um cabeçalho. Parágrafos A tag
serve para indicar o início de um novo parágrafo. Se a tag
for colocado antes de um cabeçalho (
, por exemplo), a marca de parágrafo e ignorada. Nesse caso, o próprio cabeçalho se encarrega de colocar o espaço necessário. Exemplo:
isto é um parágrafo
Quebras de linhas Assim como as marcas de parágrafo, as quebras de linha são indicadas por uma tag simples. Para abrir uma nova linha, usa-se a tag
ou "line break". Exemplo: Isto
é um pará-
grafo


11



A tag
é uma tag vazia. Ela não pode ter qualquer conteúdo e não tem tag de fim (fecho). Divisões Para dividir uma página com linhas horizontais utiliza-se a tag
. O hr não possui uma tag de fecho. O quadro seguinte define os vários atributos desta tag. Atributo

Valor

Descrição

Align

Center Left right True false

Especifica o alinhamento da linha horizontal

Pixels % Pixels %

Especifica a espessura da linha horizontal

Noshade

size width

Quando contém o valor true, a linha terá uma única cor. com false terá duas cores tentando dar a impressão de relevo.

Especifica a largura da linha horizontal

Exemplo: Isto é algum texto
Isto é mais texto O output fica assim: Isto é um texto Isto é mais texto Comentários As tags de comentário são especiais porque não se escrevem da mesma forma que as tags que representam elementos normais, Os comentários servem para dizer ao browser que o seu conteúdo é um comentário e não pode ser apresentado graficamente.


12



O exemplo seguinte mostra um comentário: O facto de termos um ponto de exclamação no início diz ao browser que esta é uma tag especial, a qual não representa um elemento normal da linguagem HTML

Listas Listas ordenadas As listas ordenadas são delimitadas pelas tags
e
e cada um dos seus itens é delimitado pelas tags
e
.
- marca um item de lista. Pode ser usado com tags
,
,
, e . Exemplo:

Item 1
Item2
Aceito por: todos os browsers. Atributos Type=n: modifica o tipo de marca que será colocada antes de cada item da lista. Quando utilizado numa lista ordenada (
), pode modificar o tipo de marca para um círculo ou um quadrado. TYPE=CIRCLE coloca um círculo vazio (uma falha no Netscape 2.0 para Windows faz com que a mesma opção produza um quadrado vazio). TYPE=DISC coloca um círculo cheio. TYPE=SQUARE coloca um quadrado cheio. Quando utilizado numa lista não ordenada, modifica o tipo de carácter que é utilizado para a contagem. TYPE=A ou TYPE= a coloca marcas em ordem alfabética (A,B,C ou a,b,c)TYPE=1 marca os itens em ordem numérica. TYPE=I ou TYPE=i marca os itens com números romanos (I,II,III ou i,ii,iii). Exemplo:


13



Item 1

ou

TYPE=a > Item 1
Item 2
Aceito por: Netscape 1.1 e Internet Explorer E - Marcam o inicio e o fim de uma lista. Devem ser usados junto com a tag
. Exemplo:
item 1
item 2
Aceito por: Todos os browsers e - Marcam o inicio e o fim de uma lista. Devem ser usadas junto com a tag
Exemplo:


14



item 1
item 2
Aceito por todos os browsers
e
- Marcam o início e o fim de uma lista ordenada. Os item da lista são colocados em ordem e recebem na primeira linha um número ou letra. Devem ser usados junto com a tag
.

Exemplo:

item 1
item 2
Aceito por todos os browsers Atributos START=n: especifica o número a partir do qual os itens da lista começam a ser contados. Sendo que n pode ser um número ou uma letra. Também podem ser utilizados números romanos. Exemplo:

item 1
item 2


15



Aceito por: Internet Explorer e Netscape 1.1 Listas Não ordenadas (Desordenadas) As listas não ordenadas são limitadas pelas tags
e
e cada um dos seus itens é delimitado pela tags
e

e
- Marcam o inicio e o fim de uma lista não ordenada. Deve ser usada junto com a tag
. os itens da lista recebem marcas gráficas na primeira linha conhecidas como bullets. Exemplo:

item 1
item 2
Aceito por todos os browsers Listas de definição As listas de definição são limitadas pelas tags
e
. Por sua vez, cada um dos seus itens é delimitado pelas tags
e
e cada uma das suas definições delimitada pelas tags
e
.
e
- Marcam o inicio e o fim de uma lista de definição. Devem ser usadas com as tags
e
Exemplo:

Título

Texto


16



Título

Texto

Aceito por todos os browsers b rowsers
e
- Marcam o início e o fim do texto de uma lista de definição. Devem ser usadas junto com os tags
e < DT>. Exemplo: Exemplo:

Título

Texto

Título

Texto

Aceito por todos os browsers b rowsers Resumo dos elementos para as listas Elementos

Descrição Define uma lista ordenada Define uma lista não ordenada Insere um item na lista Insere uma lista de definição Apresenta a definição de um termo Insere a definição de um termo Utilize o


17



Utilize o

Definição do fundo da página A definição do fundo da página pode ser feita através da atribuição de uma cor ou de uma imagem. Para a definição do fundo da página utilizam-se os atributos bgcolor e background da tag O atributo bgcolor O atributo bgcolor permite-nos escolher a cor de fundo da página. Existem três formas de indicar a cor de fundo da página: usando um código de cor hexadecimal um código rgb e um nome de cor.

Todas as formas são validas para atribuir a cor de preto ao fundo da página. O atributo background O atributo “background” estabelece que o padrão de fundo da página é dado por uma

imagem. O valor deste atributo indica o local onde se encontra a imagem. Se as dimensões da imagem forem inferiores às dimensões da página o browser repetirá a imagem por forma a ocupar todo fundo da página. background="bonecos.gif"> e.gif"> Marca de água


18



No internet Explorer pode-se controlar o comportamento comportamento da imagem de fundo. O background. Foi criado um atributo para o tag chamado BGPROPERTIES. Com a opção BGPROPERTES-FIXED. O recurso da a impressão da página ter uma marca d' água e de que o texto flutua sobre o fundo. BGPROPERTIES=FIXED> Dicas Sempre que usar uma imagem de fundo deve-se ter em consideração os seguintes aspectos: O tamanho da imagem (em kbytes) não deve ser demasiado grande. Se a imagem de fundo combina bem com a cor do texto. Se o fundo combina bem com as outras imagens que tem na página. Se da repetição a imagem de fundo em mosaico resulta um padrão perfeito. Se a imagem não é incomodativa e não desvia a atenção do texto. A linguagem HTML define vários elementos para formatar texto, como por exemplo escrever em negrito, itálico, ou sublinhado. Estilos de caracteres Elementos _{^{Descrição Texto a negrito Texto Grande Texto Itálico Sombreado Texto em Itálico Texto pequeno Texto grande negrito Inferior à linha Superior à linha Texto grande negrito Texto rasurado Texto rasurado


19



Texto rasurado Texto sublinhado Texto monoespaçado

Exemplo Texto em negrito Texto em Itálico Texto sublinhado As tags de estilo podem ser usadas uns sobre os outros, acumulando seus efeitos. texto em negrito e itálico}}texto nonoespaçado em itálico Texto monoespaçado em itálico Texto monoespaçado em negrito e itálico Para alterar a cor, o tipo de letra e o seu tamanho nos documento HTML, utiliza-se a tag que pode conter os atributos opcionais size, color e face. Tamanho da caracteres – atributos Size da tag Exemplo: Texto A tag pode ser atribuído a qualquer parte do texto, com excepção dos títulos ( , etc.). Os valores do atributo Size variam de 1 a 7. O tamanho normal do texto nos Browsers é equivalente a SIZE=3. Texto com Font size=7 O tag também pode ser utilizado com um atributo diferente para cada letra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra em tamanho maior no início de um parágrafo. T Texto Governo da República Portuguesa 20 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Também é possivel modificar o tamanho de todo o texto de uma vez só colocando a tag no topo do texto. Exemplo: Texto com Font Size=7 Texto com Font Size=6 Texto com Font Size=5 Texto com Font Size=4 Texto com Font Size=3 Texto com Font Size=2 Texto com Font Size=1 Texto com Font Size=-2 Texto com Font Size=-1 Texto com Font Size=+1 Texto com Font Size=+2 Texto com Font Size=+3 Texto com Font Size=+4 Cores Texto na cor branca Ou texto na cor branca Tipos de Fontes Um dos tipos de fontes mais comum é o arial. Exemplo: Titulo principal Alinhamento Governo da República Portuguesa 21 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira A primeira providencia para melhorar a aparência da página é modificar o alinhamento do texto. O alinhamento padrão (como o qual vem configurado os Browsers) é à esquerda. Para mudar o alinhamento padrão deve-se adicionar o atributo ALIGN dentro das tags que marcam os títulos e os parágrafos. título Desta vez, a tag ganhou uma opção (ALIGN=CENTER). Por isso, é preciso utilizar uma tag para indicar que apenas aquele parágrafo receberá um alinhamento diferente. Texto pré-formatado Com a pré-formatação, pode-se controlar o espaçamento com a barra de espaço e colocar o texto em praticamente qualquer lugar da página. Apesar da vantagem dessa forma de alinhamento arbitrário, o tag muda o tipo de carácter para uma fonte monoespaçada. Uma fonte monoespaçada é aquela na qual todos os caracteres ocupam o mesmo espaço horizontal, ao contrário da fonte proporcional, na qual o "i" ocupa menos espaços do que o "a", por exemplo. Exemplo. Este texto está pré-Formatado. Margem O texto sempre começa a uma determinda distância da janela do Browser. Às vezes, é necessário aumentar a margem e fazer com que o texto comece mais para dentro da página. As tags E serve para aumentar a margem. O efeito dessa Tag pode ser acumulado para conseguir margens maiores. Veja os exemplos: Texto com mais margem texto com mais margem ainda Formatações Lógicas Governo da República Portuguesa 22 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Elementos Descrição Define uma abreviatura Define um acrónimo Define um endereço (postal) Define a direcção de escrita do texto Citação Apresenta a definição de um termo Texto que representa uma variável Amostra do código de computador Define texto que é código de computador Marquee O internet Explorer implementa uma forma muito simples de dar movimento ao texto. Uma serie de atributos permitem controlar o tipo de movimentos do texto (da esquerda para a direita ou vice-versa), a velocidade e o tamanho, entre outras coisas. Sintaxe Governo da República Portuguesa 23 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Behavior- define como o texto em movimento vai deslizar no monitor. Scroll- passa o texto continuamente no mesmo sentido Slide- o texto parte de um ponto do monitor e vai até outro e para. Alternate- O texto vai e vem. Direction-define a direção em que o texto vai deslizar. Loop- determina quantas vezes o texto vai deslizar no monitor. Height e width – altura e largura Hspace e Vspace – determina o espaço em pixeis que deve ficar livre em torno do texto em movimento. Hspace- Espaço horizontal e Vspace – espaço vertical Bgcolor- cor de fundo do texto em movimento Scrollamount e scrolldelay- controlam a velocidade do texto em movimento. O scrolldelay define o tempo em milissegundos, que o texto em movimento vai demorar em cada um dos quadros. O scrollamount define a quantidade de pixels que vai percorrer em cada quadro. Exemplo: olá melguinhas. Blink- faz com que o texto fique a piscar. Exemplo: A minha Escola Uso das Cores Os códigos das cores em HTML têm por base a codificação RGB(Red,Green,Blue) e podem ser referenciadas de 3 formas distintas: -pelo nome das cores em inglês, por exemplo, black; -pelo sistema de numeração hexadecimal, por exemplo, #ffff00 -pelo sistema de numeração decimal, por exemplo, rgb(2,255,0). Governo da República Portuguesa 24 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Formas de exprimir cores Na notação hexadecimal as cores exprimem-se usando três números hexadecimais que definem as quantidades de encarnados, verdes e azul que entram na composição de uma determinada cor. O valor mais baixo de uma determinada cor é o (#00 na notação hexadecimal) e o valo mais alto é 255 (#FF em notação hexadecimal.) Assim, a cor preta tem 0 de encarnado, 0 de verde, e 0 azul pelo que se escreve na forma #000000. Já o branco tem 255 encarnados, 255 verdes e 255 azul pelo que se escreve como #ffffff. O amarelo forte tem 255 de encarnado, 255 de verde e zer de azul e escreve-se como #ffff00. A tabela seguinte mostra os resultados de diversas combinações de cores: Cor Código Hexadecimal Color RGB (decimal) #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255) Nomes de cores A tabela seguinte mostra as 16 cores cujos nomes foram definidos oficialmente pela W3C. todos os browsers reconhecem estes nomes pelo que pode usá-los sem qualquer problemas. Governo da República Portuguesa 25 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira  Cores com Nomes Atributos oficialmente Aqua Black Blue Fudisia (#00FFFF) (#00000) (#0000FF) (#FF00FF) Green Gray Lime Maroon (#008000) (#808080) (#00FF00) (#800000) Navy Olive Purple Red (#000080) (#808000) (#800080) (#FF0000) Silver Teal White Yellow (#C0C0C0) (#008080) (#FFFFFF) (#FFFF00) Cores Seguras da Web  Problemas causados por um número reduzido de cores Todos os computadores modernos são capazes de mostrar dezenas de milhar ou milhões de cores em simultâneo. Contudo, até meados da década de 1990 muitos sistemas apenas conseguiam apresentar 256 cores diferentes de cada vez. Esta limitação obrigava os browsers a trabalharem com uma paleta fixa que continha apenas 256 cores. Os browsers eram obrigados a usar apenas 256 cores para simular todas as cores que não conseguiam apresentar. Os efeitos destas aproximações eram visíveis na forma pontos adjacentes com cores diferentes e de manchas de cor. Actualmente estas limitações já quase não existem. Como acabamos de ver, na primeira metade da década de 1990, a maioria dos computadores eram capazes de apresentar apenas 256 cores diferentes de cada vez. Dessas 256 cores, os sistemas operativos Windows e Aplle Macintosh reservavam 20 cores cada um (40 no total) para desenhar os seus interfaces gráficos. Governo da República Portuguesa 26 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Assim, de um total de 256 cores possíveis, apenas 216 podiam se escolhidas livremente com garantia de poderem ser apresentadas tanto numa máquina Windows como num Mac. Estas 216 cores receberam a designação de cores seguras da Web. A forma encontrada para limitar as consequências resultantes da utilização de uma paleta com apenas 216 cores consiste em usar apenas cores cujos códigos hexadecimais usam apenas combinações dos números indicados na tabela seguinte RGB 00 51 102 153 204 255 HEx 00 33 66 99 CC FF As 216 cores seguras da Web, juntamente com os seus códigos hexadecimais (o carácter # no inicio foi omitido) 000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 66FF00 000033 003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 663333 666633 669933 66CC33 66FF33 000066 003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 663366 666666 669966 66CC66 66FF66 000099 003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 663399 666699 669999 66CC99 66FF99 0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF Governo da República Portuguesa 27 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00 990033 993333 996633 999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33 990066 993366 996666 999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66 990099 993399 996699 999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF Tons de Cinzento As cores cinzentas obtêm-se combinando quantidades iguais de encarnado, verde e azul. A cor branca corres ponde ao cinzento mais claro de todos e obtêm-se juntando 255 cores de encarnado, 255 cores de verde e 255 de azul (#FFFFF em hexadecimal.) o preto e o cinzento mais escuro de todos obtêm-se colocando todas as cores a zero (#000000 em hexadecimal.) Entre este dois valores extremos temos 254 graus de intensidade possíveis. Governo da República Portuguesa 28 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira A tabela seguinte da uma ideia dos tons de cinzento que podemos obter: Tons de cinzento Hexadecimal #000000 #080808 #101010 #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868 #707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF RGB rgb(0,0,0) rgb(8,8,8) rgb(16,16,16) rgb(24,24,24) rgb(32,32,32) rgb(40,40,40) rgb(48,48,48) rgb(56,56,56) rgb(64,64,64) rgb(72,72,72) rgb(80,80,80) rgb(88,88,88) rgb(96,96,96) rgb(104,104,104) rgb(112,112,112) rgb(120,120,120) rgb(128,128,128) rgb(136,136,136) rgb(144,144,144) rgb(152,152,152) rgb(160,160,160) rgb(168,168,168) rgb(176,176,176) rgb(184,184,184) rgb(192,192,192) rgb(200,200,200) rgb(208,208,208) rgb(216,216,216) rgb(224,224,224) rgb(232,232,232) rgb(240,240,240) rgb(248,248,248) rgb(255,255,255) Governo da República Portuguesa 29 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira A tabela correspondente ao código das cores seguras pode ser consultado em: http://www3shools.com/html/html/colors.asp http://www3shools.com/html/html/colorsfull.asp http://www3shools.com/html/html/colorsnames.asp Uso de imagens É possível colocar variados formatos de imagens nos documentos HTML, embora, por questão de eficiência e tamanho, os formatos mais comuns são o JPEG, o GIF e o PNG. Sintaxe: ALIGN= “[center/left/rigth/top/middle/bottom/absmiddle/texttop/baseline/absbottom]” WIDTH =”[largura]” Height=”[altura]” VSPACE =”[Espaçamento vertical]” HSPACE=”[Espaçamento Horizontal]” BORDER=”[Borda]” ALT=”[texto alternativo] LOWSRC=”[url de baixa qualidade]”  O elemento e o atributo src. A inserção de imagens num documento faz-se com o elemento . Este elemento tem conteúdo vazio, o que significa que ele apenas possui atributos e não tem a tag de Governo da República Portuguesa 30 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira fecho. O atributo src (que é uma abreviatura de “source,” ou origem) indica o nome e o local em que pode ser encontrado o ficheiro que contém a imagem. Exemplos: -apresenta uma imagem de nome imagem.jp que se encontra no mesmo directório da página. -apresenta uma imagem de nome imagem.gif que se encontra no directório raiz do host. - apresenta uma imagem de nome imagem.jpg que se encontra no directório um nível abaixo do directório da página. -apresenta uma imagem de nome imagem.jpg que se encontra no site Alcobia.  O atributo alt O atributo alt usa-se para definir “ Texto alternativo” à imagem. Este texto será mostrado em vez da imagem no caso de o browser não conseguir apresentá-la, e usase assim: Exemplo: O atributo “alt” deve conter uma descrição daquilo que a imagem contém para que seja possível compreender o seu conteúdo mesmo sem a ver. A utilização do atributo “alt” é recomendada porque melhora a acess ibilidade das páginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado pelas pessoas que têm deficiências visuais. Nesses casos sem o atributo “alt” o conteúdo das imagens seria sempre um mistério.  Alinhamento da imagem É possível mudar o alinhamento utilizando o atributo ALIGN=dentro da tag . Exemplo: Governo da República Portuguesa 31 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira ALIGN=LEFT faz a imagem “flutuar” à esquerda, enquanto o texto circunda a imagem pela direita. ALIGN=RIGHT faz a imagem “flutuar” à direita, enquanto o texto circunda a imagem à esquerda. ALIGN=TOP alinha o topo da imagem com o topo do elemento mais alto da linha, que pode ser uma outra imagem. ALIGN=TEXTTOP alinha o topo da imagem com o topo do texto. Governo da República Portuguesa 32 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira ALIGN=MIDDLE alinha a base do texto com o centro da imagem. ALIGN=BOTTOM alinha a imagem com a base dos outros elementos da linha. ALIGN=BASELINE E ALIGN=ABSBOTTOM alinham a imagem com a base dos outros. ALIGN=ABSMIDDLE alinha o centro do texto com o centro da imagem.  Contorno O atributo é BORDER. O valor da borda é expresso em pixels. Exemplo: Governo da República Portuguesa 33 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira  Margens É possível definir as margens separadamente ou em conjunto. Para mais espaço em cima e em baixo da imagem, o atributo e VSPACE. Se o problema for espaço dos lados da imagem usa-se o atributo HSPACE para definir as margens horizontais. Cada um desses atributos (HSPACE e VSPACE) adiciona espaço nas duas faces a imagem (em cima e em baixo e a direita e a esquerda).  Baixa resolução A inclusão da imagem de baixa resolução e conseguida com a colocação do atributo LOWSRC que indica o ficheiro que será carregado primeiro. No exemplo acima, o arquivo altaresco.gif é a imagem definitiva, de alta resolução. O arquivo baixares.gif é a imagem de baixa resolução que será carregada antes.  Controlar a quebra de linha Quando aplicamos atributos de alinhamento na imagem, o texto fica colocado ao lado da imagem. Quando é necessário quebrar o texto e o próximo paragrafo se apresente após a imagem, então utiliza-se o atributo clear, na tag BR. Sintaxe: “O morango é rico em água e tem baixos níveis de hidratos de carbono.bTem também um elevado conteúdo de potássio, responsável pela transmissão de impulsos nervosos e pelo bom funcionamento dos músculos..” “O fruto conta ainda com ácido fólico, que intervém na produção de glóbulos vermelhos e brancos e na síntese de anticorpos, o que ajuda a reforçaras Governo da República Portuguesa 34 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira defesas naturais, sendo muito recomendado às mulheres grávidas na prevenção da espinha fíbida do feto e de anemias. Além disto o morango tem ainda um efeito diurético, que favorece a eliminação do ácido úrico e sais. ” Hiperligações Ao criar links, é essencial compreender o caminho do ficheiro entre o documento do qual parte o link e o que está a ser vinculado. Cada página da Web tem endereço único chamado Universal Resource Locator (URL). Existem três tipos de caminhos de links: 1. Caminhos absolutos; 2. Caminhos relativos a documentos; 3. Caminhos relativos à raiz. Caminhos absolutos – fornecem a URL completa do documento vinculado. Por exemplo: http://www.essje.pt/paginashtml/escola/orgaos.htm é um caminho absoluto. Deve ser utilizado um caminho absoluto para estabelecer um link a u documento noutro servidor. Governo da República Portuguesa 35 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Caminhos relativos a documentos – são os mais apropriados para os links locais na maioria dos sites da Web. Eles são particularmente úteis quando o documento actual e o vinculado estão na mesma pasta, e possivelmente permanecerão juntos. O caminho relativo a documento também é utilizado para estabelecer um link a um documento noutra pasta especificando o caminho através da hierarquia de pastas, do documento actual ao vinculado. Na especificação desse caminho, não consta a parte da URL absoluta, que é a mesma para ambos os documentos. É fornecido apenas o segmento do caminho que é diferente.    Para estabelecer um link a outro ficheiro na mesma pasta que o documento actual, basta indicar o nome do ficheiro. Para vincular a um ficheiro numa subpasta da pasta do documento actual, forneça o nome da subpasta, coloque uma barra inclinada para a direita e, em seguida o nome do ficheiro. Para vincular a um ficheiro numa pasta-mãe daquela onde está o documento actual, preceda o nome do arquivo por ../ (onde “..” significa “um nível acima na hierarquia de pastas.”). Caminhos relativos à raiz – fornecem o caminho da pasta raiz do site a um documento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar num site grande da Web, que use vários servidores, ou um servidor que hospede diversos sites diferentes. Contudo, se não estiver familiarizado com este tipo de caminho, pode ser melhor continuar a usar os caminhos relativos a documento. Um caminho relativo à raiz inicia com uma barra inclinada para a direita, que representa a pasta raiz do site. Por exemplo: /escola/orgaos.html é um caminho relativo à raiz. Podem ser criados diversos tipos de links num documento:   Um link a outro documento ou ficheiro, como um ficheiro de imagem, filme, PDF ou som; Um link de ancora com nome, que salta para uma localização especifica num documento; Governo da República Portuguesa 36 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira   Um link de correio electrónico, que cria uma nova mensagem com o endereço do destinatário já preenchido; Os links nulos e de script, que permitem anexar comportamentos a um objecto ou criar um link que execute código JavaScript. O elemento serve para criar uma ligação (“link”) para outro documento. A ligação pode apontar para qualquer recurso disponível na Web: uma página escrita em HTML, uma imagem, um ficheiro de som, um filme, etc. Sintaxe: Texto a mostrar O atributo href (Hipertext REFerence) contem o endereço (URL) do recurso ao qual se faz a ligação. Aquilo que está dentro do elemento constitui o material visível sobre o qual se deve clicar para ligar ao recurso. NOTA: todos os ficheiros referidos numa pagina, quer links a outras paginas, quer imagens, etc., devem ser escritos em minúsculas, pois a grande maioria dos servidores Web fazem a distinção entre maiúsculas e minúsculas.  Diversos tipos de links  Uma imagem com um link:   Um link a outro site: HTML Página da Escola Um link para download: Faça o Download Aqui  Um link a outra pagina do mesmo site: Governo da República Portuguesa 37 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira  O atributo target O atributo target permite-nos abrir a ligação numa janela ou moldura (“frame”) diferente daquela em que foi feito o clique. Os valores padrão são: _blank (uma nova janela) _self (própria janela) _top (na janela principal do browser, em casos de frames) _parent (só para ligações que estão numa moldura, ou “frame”) a ligação abre se no documento que contem a moldura (que terá sido criada através de um ou de um <iframe>) Nome a especificar (nome da frame)  O atributo name O atributo name usa-se para dar um nome único à âncora. Este nome serve para marcar o lugar em que a âncora se encontra e tornar possível saltar directamente para esse local a partir de outros documentos ou de outros pontos do mesmo documento sem que o utilizador tenha de se deslocar na página. A criação de um link a uma ancora com nome é um processo em duas etapas. Primeiro, crie uma ancora com nome e, em seguida, crie um link a essa ancora. Sintaxe de uma âncora: < a name=”nome”>Texto a mostrar O atributo name dá um nome único ao local em que se encontra a âncora. Esse nome pode ser um texto à sua escolha e não deve ser repetido em nenhuma outra âncora que esteja no mesmo documento. A linha seguinte define uma âncora com um nome: Voltar ao Menu Governo da República Portuguesa 38 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Nota: uma âncora com atributo name não pode ter atributo href. Por isso ela não é sensível a cliques. Ela serve apenas para marcar um local do documento para o qual podem apontar outras ligações. Depois de darmos um nome a um local do documento podemos ligar directamente a ele. Topo Exemplo de âncoras  Âncora Topo: Grãos  Link à âncora Topo: Topo Governo da República Portuguesa 39 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira  Cores dos links A cor dos links é definida na tag . Onde: LINK determina a cor dos links não visitados ALINK determina a cor que os links devem ter quando clicados VLINK determina a cor dos links já visitados  Link de correio electrónico Um link de correio electrónico abre uma nova janela de mensagem sempre que for clicado. Para que um link seja identificado como link de correio electrónico é necessário escrever antes do endereço electrónico a palavra mailto: Exemplo para criar um link de correio electrónico: Contacto através de E-mail Image maps Um mapa de imagens é uma imagem que foi dividida em regiões, ou pontos activos: quando um ponto activo é clicado, ocorre uma acção (um novo ficheiro é aberto, por exemplo). O conjunto destes pontos activos permite criar diferentes formas, como círculos, rectângulos e polígonos, construindo, desta forma um mapa de imagem, em que cada uma das formas geométricas possibilita uma hiperligação para outro documento. Governo da República Portuguesa 40 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira  Definir as zonas das imagens Para definir as zonas das imagens é necessário conhecer as coordenadas dos pontos essenciais, que identificam as formas dessas zonas num mapa de imagem.  Criação de server-side e client-side image maps A criação de mapas pode ser feita de duas formas: criação do mapa do lado do servidor (server-side image map) ou do lado do cliente (client-side image map). A criação do mapa de imagem do lado do servidor, método inicialmente usado, é guardar e executar no servidor Web, como recurso ao CGI, um mapa separado do documento. Se a grande vantagem é ser suportado por todos os browsers, o maior inconveniente é provocar uma carga de processamento no próprio servidor, pelo que se torna difícil encontrar quem permita este tipo de processo nos seus servidores. Para utilizar este método é necessário referenciá-lo através do atributo ismap da tag img. Este atributo indica ao browser que a referida imagem não é uma hiperligação, mas sim o fundo sobre a qual estarão as hiperligações definidas no mapa. A criação do mapa de imagem do lado do cliente é feita aproveitando a capacidade de processamento deste. Para utilizar este método é necessário enviar o mapa de imagem dentro do documento HTML, indicando ao browser o que fazer, através da utilização do atributo usemap da tag img. Este atributo indica ao browser que a referida imagem é o fundo sobre o qual estão as hiperligações definidas no mapa. src=”nome_do_ficheiro_de_imagem.gif”usemap=”nome do mapa de imagem” atl=””> Governo da República Portuguesa 41 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Para definir um mapa de imagem utiliza-se as tags e . Dentro desta tag utiliza-se a tag que contem os tributos que permitem definir as zonas do mapa de imagem e as respectivas hiperligações, entre outros.  Atributos da tag Atributo Valor Descrição Coords Se shape="rect" coords="left", top,right,bottom". então Se shape="circ" coords="centerx, centery,radius" então Especifica as coordenadas que definem a área "clicável" Se shape="poly" então coords="x1,y1,x2,y2,...,xn,yn " Href URL Especifica o valor do URL atribuído à área Se false exclui uma área do mapa de imagem True nohref false shape Rect Rectangle Define a forma geométrica da área (retângulo, circulo ou polígono) Circ Circle Poly polygon Target _blank _parent Especifica a janela (ou a moldura) onde se abre a ligação ao clicar.  _blank- a ligação abre-se numa nova janela Governo da República Portuguesa 42 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira _self  _top    _self- a ligação abre-se na própria janela que contém o elemento _parent- (só para ligações que estão numa moldura, ou "frame" a ligação abre-se no documento que contém a moldura (que terá sido criado através de um ou de um elemento <iframe>) _top- a ligação abre-se no documento que ocupa a posição mais elevada na hierarquia (aquele que não está dentro de nenhum nem num <iframe> O atributos id e name da tag Atributo Valor Descrição id Unique_name Define um nome único que identifica o mapa name Unique_name Define um nome único para o elemento (para manter a compatibilidade com os browsers antigos) Exemplo: Exemplo Governo da República Portuguesa 43 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Nota: O atributo “usemap” utilizado com o element img refere -se ao atributo “id” ou o atributo “name” (depende do browser) existente num element o map. Por isso, se queremos garantir a compatibilidade da página com todos os browsers, devemos aplicar ambos os atributos (“id” e “name”) ao elemento map.  Compatibilidade com os vários browsers Para tornar o HTML compatível com os browsers como o Netscape e afins, deve-se acrescentar o atributo id à tag , já que este não reconhece o atributo name. Inserção de elementos multimédia Governo da República Portuguesa 44 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira  Gifs animados Para inserir um gif animado num documento html utilize-se a tag e indica-se o nome do ficheiro que se deseja abrir através do seu atributo src.  Vídeo A Microsoft inventou um atributo chamado DYNSRC (de dynamic source, fonte dinâmica) para ser incluído dentro do tag . O formato do ficheiro de vídeo suportado é o AVI (Audio Video Interleave). O atributo START=MOUSEOVER indica que o vídeo começará a ser executado quando o utilizador passar a mousse sobre ele. O atributo LOOP=INFINITE declara que o vídeo será visualizado continuamente até que o utilizador mude de página. Outros atributos são: START=FILEOPEN – o vídeo começa a ser visualizado assim que a página é carregada CONTROLS – adiciona um conjunto de botões para controlar a execução do vídeo LOOP=n – executa o vídeo “n” vezes. Se for colocado LOOP=5, o vídeo será visualizado cinco vezes LOOPDELAY=n – especifica, em milissegundos, de quanto em quanto tempo o vídeo será executado quando colocado em loop.  Som Para colocar som, a Microsoft criou o tag BGSOUND. Pode-se incluir áudio nos formatos WAV, AU ou MIDI.  Ficheiros de vídeo e áudio embebidos e ancorados Para embeber ou inserir um ficheiro de som ou de vídeo num documento HTML utiliza-se a tag . Quando se utiliza esta tag, os ficheiros de som podem ser Governo da República Portuguesa 45 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira automaticamente reproduzidos utilizando suplementos ou plug-ins e surgem como objecto a ser controlado na página Web. Caso o suplemento ou Plug-in não exista, o browser reagirá com uma das três possibilidades: ignora a instrução, pergunta o que deseja fazer com o ficheiro ou indica que necessita de um suplemento e se gostaria de o descarregar. A tag embed tem como principais atributos o src, que se iguala ao url do ficheiro aembeber, o autostart, o hidden e o loop, que pode assumir valores True ou False. Autostart – define se o objecto deve ser iniciado imediatamente após ter sido carregado. Hidden – define se o objecto deve ser visível na página Web. Loop – reproduz continuamente o ficheiro. Áudio: Video: ficheiro de vídeo” autostart =false loop=Falase Texto associado à hiperligação Tabelas As tabelas definidas em HTML tem permitido apresentar dados em forma tabular e constituir arranjos de página complexos. Governo da República Portuguesa 46 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira  Definir tabelas As tabelas definem-se com o elemento . Uma tabela divide-se em linhas (com o elemento , cujo nome deriva de “table row”), e cada linha divide -se em células (definidas com o elemento - cabeçalho da tabela, posiciona a linha no inicio da tabela. - rodapé da tabela, posiciona a linha no fim da tabela. - corpo da tabela, posiciona a linha no fim da tabela. Basicamente as tags de definição de áreas da tabela comportam-se como a tag de linha () e aceitam os mesmos parâmetros. Exemplo: , cujo o nome deriva de “table data”). Uma célula pode conter dados, textos, imagens e outros elementos do HTML. Sintaxe: [conteudo] Governo da República Portuguesa 47 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Atributos:               WIDTH – determina a largura da tabela ou da célula e aceita valores em pixies ou em percentagem. HEIGHT – determina a altura da tabela ou da célula e aceita valores em pixéis ou em percentagem. ALIGN – determina o alinhamento da tabela em relação à página. VALIGN – determina o alinhamento vertical do conteúdo de uma célula. O valor – padrão para a maioria dos browsers e centralizado (middle). BGCOLOR – determina a cor de fundo. BACKGROUND – atribui uma imagem de fundo à sua tabela, linha ou célula. CELLPADDING – determina em pixéis a distância existente entre as bordas da célula e o seu conteúdo. CELLSPACING – determina o espaço em pixéis existente entre uma borda e outra. BORDER – determina a espessura do limite da tabela. O padrão é sem limite. BORDERCOLOR – determina a cor do limite (borda) da tabela. BORDERCOLORDARK – como os limites da tabela apresentam a coloração de forma diferente para criar a sensação de tridimensão, podemos determinar de forma diferente as cores do lado escuro e do lado claro da tabela. BORDERCOLORDARK – determina a cor do lado escuro da borda (à esquerda e acima da tabela). BORDERCOLORLIGHT – determina a cor do lado claro da borda (à direita e abaixo da tabela). FRAME – pode alterar o posicionamento dos limites de uma tabela. Os valores válidos para o atributo frame são: Void – elimina os limites externos; Above – apenas o limite superior; Below – apenas o limite inferior; Hsides – lados horizontais, ou seja, os limites de cima e de baixo; Vsides – lados verticais, esquerda e direita da tabela Lhs – limite do lado esquerdo; Rhs – limite do lado direito; Governo da República Portuguesa 48 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira   Box – limite completo (padrão); Broder – limite completo (padrão). COLSPAN – atributo que une duas ou mais células horizontalmente. ROWSPAN – atributo que une duas ou mais células verticalmente. Exemplo: Linha 1, célula 1 Linha 1, célula 2 Linha 2, célula 1 Linha 2, célula 2 linha 1, celula 1 linha 1, celula 2 linha 2, celula 1 linha 2, celula 2  Definição das áreas da tabela As tags de definição das áreas da tabela são: Governo da República Portuguesa 49 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Este texto está sob um elemento Este texto está sob um elemento tfoot Este texto está sob um elemento body >/td>  Título da tabela Para activar um título para uma tabela, deve-se utilizar a tag CAPTION. Sintaxe: [t ítulo] EXEMPLO: Isto é uma legenda célula 1 Célula 2 Governo da República Portuguesa 50 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira Molduras (frames)  O que é uma frame? As molduras são subjanelas definidas sobre a janela principal do browser. Estas subjanelas são criadas dividindo a janela em várias partes. Cada uma dessas partes pode apresentar uma página da Web diferente.  Vantagens e desvantagens das molduras As molduras permitem-nos apresentar mais do que uma página HTML numa única janela do browser. Cada pagina esta dentro da sua própria moldura (subjanela) e é independente das restantes páginas. Podemos determinar regiões fixas nas molduras, apresentando por exemplo um logótipo de uma empresa, um menu de navegação, etc. Apesar de oferecerem alguma liberdade ao facilitarem bastante a criação de barras de navegação em conjuntos de documentos com muitas páginas e de tornarem bastante mais rápido o carregamento das páginas, as molduras também podem dar origem a algumas dificuldades, tais como:    O criador de páginas vê-se obrigado a lidar com um número maior de páginas ao mesmo tempo; A impressão do conteúdo do browser fica mais difícil; Por vezes é preciso que um único elemento faça ligação a duas ou mais paginas, o que obriga a utilizar JavaScript. Sintaxe: Governo da República Portuguesa 51 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira MARGINWIDTH=”[Margem lateral]” MAGINHEIGHT=”[Margem vertical]” SCROLLING=”[yes/no/auto]”  A tag Frameset O elemento define a forma como a janela do browser se subdivide para acomodar as molduras. Este elemento divide a janela do browser em linhas e colunas. Os valores atributos às linhas e às colunas indicam a quantidade de área de ecrã que cada linha e cada coluna devem ocupar. NOTA: não é necessário colocar a tag TITLE nas páginas que fazem parte da frame, pois o único de título de página que aparece é o que foi indicado na página principal que controla as frames. Atributo Cols Valor Pixels % Descrição Define o número de colunas em que a janela é dividida e os seus tamanhos * rows Pixels % Define o número de linhas em que a janela é dividida e os seus tamanhos *  A tag O elemento define qual o documento HTML a colocar numa determinada moldura. NOTA: não use o elemento numa página que contem molduras (“frames”). Se o fizer as molduras não serão apresentadas. Atributo Valor Descrição frameborder 0 Indica se deve ser desenhada ou não uma linha Governo da República Portuguesa 52 Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto Formador: Rui Pereira 1 em redor da moldura longdesc URL URL de uma página que contém uma descrição extensa do conteúdo da moldura. Útil para ajudar os utilizadores de browsers que não suportam molduras. marginheight Pixels Define as espessuras das margens superior e inferior da moldura marginwidth pixels Define espessuras das margens esquerda e direita da moldura name Frame name Define um nome único a dar à moldura objecto. (usa-se para comunicar com os scripts, que podem estar em outras molduras noresize noresize Quando utilizado ( o valor "noresize" é o único permitido), o tamanho da moldura deixa de poder ser alterado. scrolling Yes Determina se existem ou não barras de deslocamento ("scroll bars".) o valor "auto" sugnifica automático ( o browser decide se deve ou não mostrar "scroll bars") No Auto src URL  O URL da página que vai ser apresentada na moldura A tag noframes O elemento deve conter texto que só será mostrado no caso de o browser não ser capaz de mostrar documentos contidos em molduras (“frames”).<br /> <br /> Este elemento deve ficar dentro de um elemento <frameset>. <br /> <br /> A tag iframes<br /> <br /> O elemento iframe insere uma subjanela, ou moldura, dentro de uma página da Web (“inline frame”). A nova moldura contem a sua própria página e assemelha -se a uma moldura (“frame”) criada com os elementos <fra me> e <frameset>, mas<br /> <br /> Governo da República Portuguesa<br /> <br /> 53<br /> <br /> Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto<br /> <br /> Formador: Rui Pereira<br /> <br /> está dentro de uma página normal (no meio dos seus conteúdos) em vez de estar num frameset. Atributos opcionais:<br /> <br /> Atributo<br /> <br /> Valor<br /> <br /> Descrição<br /> <br /> Align<br /> <br /> Left<br /> <br /> Especifica o modo como a moldura (ou sujanela) é alinha na página que a contém<br /> <br /> Right Top Middle bottom Frameborder height<br /> <br /> 0 1<br /> <br /> Indica se é desenhada ou não uma linha em redor da moldura<br /> <br /> Pixels<br /> <br /> Define a altura da moldura<br /> <br /> % longdesc<br /> <br /> URL<br /> <br /> URL de uma página que contém uma descrição extensa do conteúdo da moldura<br /> <br /> Marginheight<br /> <br /> Pixels<br /> <br /> Define as espessuras das margens superior e inferior da moldura<br /> <br /> Marginwidth<br /> <br /> Pixels<br /> <br /> name<br /> <br /> Framename<br /> <br /> Define um nome único a dar a moldura (usada para comunicar com os sripls, que podem estar em outras molduras<br /> <br /> scrolling<br /> <br /> Yes<br /> <br /> Especifica como são apresentadas as barras de deslocamento ("scroll bars")<br /> <br /> No<br /> <br /> Define as espessuras das margens esquerda e direita da moldura<br /> <br /> Auto Width<br /> <br /> URL<br /> <br /> O URL da página que vai ser apresentada na moldura<br /> <br /> Pixels<br /> <br /> Define a largura da moldura<br /> <br /> %<br /> <br /> Governo da República Portuguesa<br /> <br /> 54<br /> <br /> Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto<br /> <br /> Formador: Rui Pereira<br /> <br /> Exemplos: <br /> <br /> Criar janelas dispostas na vertical<br /> <br /> <html> <head> <title> Exemplo 1 </title> </head> <frameset cols=”25%,50%,25%”> <frame src=”esquerda.html”> <frame src=”centro.html”> <frame src=”direita.html”><br /> <br /> </frameset> </html><br /> <br /> <br /> <br /> Criar janelas dispostas na horizontal<br /> <br /> <html> <head> <title> Exemplo 2 </title> </head> <frameset rows=25%,50%,25%”> <frame src=”primeira.html”> <frame src=”segunda.html”> <frame src=”terceira.html”><br /> <br /> </frameset> </html><br /> <br /> Governo da República Portuguesa<br /> <br /> 55<br /> <br /> Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto<br /> <br /> Formador: Rui Pereira<br /> <br /> <br /> <br /> Criar janelas na horizontal e vertical<br /> <br /> <html> <head> <title> Exemplo 3 </title> </head> <frameset rows=”50%,50%”> <frame src=”horizontal.html”> <frameset cols=”25%,75%”> <frame src=”esquerda_vertical.html”> <frame src=”direita_vertical.html”><br /> <br /> </frameset> </frameset> </html><br /> <br /> <br /> <br /> Colocar uma inline frame dentro de uma página<br /> <br /> <html> <head> <title> Exemplo </title> </head> <body> <h3> Uma frame “inline” (iframe)</h3> <iframe src=”exemplo.html”><br /> <br /> </iframe> <p> Alguns browsers antigos não suportam iframes. </p> </body><br /> <br /> Governo da República Portuguesa<br /> <br /> 56<br /> <br /> Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto<br /> <br /> Formador: Rui Pereira<br /> <br /> </html><br /> <br /> Planeamento de um site <br /> <br /> O planeamento de um Web site é fundamental quando se quer construir algo com “cabeça, tronco e membros”.<br /> <br /> FASE 1 – DEFINIR OBJECTIVOS<br /> <br />   <br /> <br /> Para quê? Qual o propósito ou finalidade do WebSite? Uma definição precisa dos objectivos é necessária e útil para fundamentar as decisões que se tomam quanto à sua estrutura, conteúdo e manutenção .<br /> <br /> FASE 2 – CARACTERIZAR O PUBLICO ALVO<br /> <br /> Governo da República Portuguesa<br /> <br /> 57<br /> <br /> Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto<br /> <br /> Formador: Rui Pereira<br /> <br />   <br /> <br /> Para quem? A quem se dirige? Para qualquer pessoa em geral, ou para um determinado tipo de utilizador?<br /> <br /> FASE 3 – IDENTIFICAR OS CONTEUDOS A PUBLICAR<br /> <br />    <br /> <br /> O que é adequado a publicar? Que informação deve conter? Devem ter em conta os objectivos definidos, o público-alvo. Trabalhos pessoais, imagens, conteúdos, multimédia, etc.<br /> <br /> FASE 4 – IDENTIFICAR OS RECURSOS A UTILIZAR<br /> <br /> <br /> <br /> Que recursos ou meios necessitamos para a construção? Exemplo: software de tratamento de imagens<br /> <br /> FASE 5 – ESTRUTURA GERAL DO WEBSITE<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Trata-se de pensar o site em termos globais ou de estrutura (não ainda em ralação aos detalhes). Devemos pensar em fazer um esboço ou esquema das páginas que vão integrar o site; organizar o site por secções; definir relações ou ligações entre páginas – estrutura hierárquica. Devem ser distribuídos por páginas construídas com uma estrutura consistente, isto é, com regras de construção, organização e arrumação semelhantes, para que o acesso à informação seja fácil. Outro cuidado a ter prende-se com uma característica essencial das páginas WEB: as páginas Web não são livros, a sua leitura não é linear. Por isso, em cada página que compõe o site deve poder saber-se:  Quem é o autor?  De que se trata o Site?<br /> <br /> Governo da República Portuguesa<br /> <br /> 58<br /> <br /> Curso: Rececionista de Hotel TIC-Tecnologia de Informação e Comunicação 0792/Criação de Páginas para a Web em hipertexto<br /> <br /> Formador: Rui Pereira<br /> <br /> <br /> <br /> Como voltar à página inicial, ou como ir até qualquer outra página do site?<br /> <br /> HIERARQUIA DA INFORMAÇÃO<br /> <br /> Estrutura do site  <br /> <br /> <br /> <br /> A estrutura que será apresentada no site deve ser dividida em unidades. Deve ser estabelecida uma hierarquia entre esses blocos de informação, bem como determinar as ligações entre esses blocos. EXEMPLO: FALTA IMAGEM Reparem na sequência principal (o índex.html) aponta para mais duas páginas e estas páginas vão apontando para outras, inclusive no exemplo a “ página 5” aponta para um arquivo, isso pode ser infinito, você pode criar quantas páginas e apontá-las para quantas páginas e arquivos quiser.<br /> <br /> CONSISTÊNCIA DO SITE<br /> <br /> <br /> <br /> <br /> <br /> Identidade visual própria, que se deve manter ao longo de todas as páginas para que o utilizador encontre a informação que procura utilizando os mesmos procedimentos. O Layout de uma página é com tabelas. As tabelas são compostas por células que irão apresentar os dados e organizar texto, imagens e outros objectos.<br /> <br /> DEFINIR O ASPECTO VISUAL DAS PÁGINAS<br /> <br /> FALTA IMAGEM CUIDADOS A TER<br /> <br /> Governo da República Portuguesa<br /> <br /> 59<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://idoc.tips/report/introduaoao-htmlpdf-pdf-free" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Introdução_ao _HTML.pdf"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2025 IDOC.TIPS. All rights reserved. <div class="pull-right"> <span><a href="https://idoc.tips/about">About Us</a></span> | <span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> | <span><a href="https://idoc.tips/term">Terms of Service</a></span> | <span><a href="https://idoc.tips/copyright">Copyright</a></span> | <span><a href="https://idoc.tips/contact">Contact Us</a></span> | <span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://idoc.tips/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177830117-1'); </script> <script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://idoc.tips/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function (event, ui) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a> </div> <script> function accept_IDOCTIPS_cookie_box() { document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/"; hide_IDOCTIPS_cookie_box(); } function hide_IDOCTIPS_cookie_box() { var cb = document.getElementById('IDOCTIPS_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var IDOCTIPS_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('IDOCTIPS_cookie_box_viewed'); if (IDOCTIPS_cookie_box_viewed) { hide_IDOCTIPS_cookie_box(); } })(); </script>  </body> </html>

Introdução_ao _HTML.pdf

Recommend Documents

, como o maior cabeçalho, e termina em

, como o menor. Os cabeçalhos

e

aparecem tão pequenos no browser que provavelmente nunca serão usados. Exemplo:

isto é um cabeçalho isto é um cabeçalho

isto é um cabeçalho

isto é um cabeçalho

isto é um cabeçalho

isto é um cabeçalho

título