A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Linguagem HTML. Introdução HTML: HyperText Markup Language Linguagem de formatação lógica Suporte a hipertexto e multimídia Derivada do SGML Extensões.

Apresentações semelhantes


Apresentação em tema: "Linguagem HTML. Introdução HTML: HyperText Markup Language Linguagem de formatação lógica Suporte a hipertexto e multimídia Derivada do SGML Extensões."— Transcrição da apresentação:

1 Linguagem HTML

2 Introdução HTML: HyperText Markup Language Linguagem de formatação lógica Suporte a hipertexto e multimídia Derivada do SGML Extensões proprietárias

3 HTML HyperText Markup Language –Hipertexto: navegação entre documentos selecionando palavras chave realçadas no texto –markup: anotações ou marcas dentro de um texto, instruindo como uma passagem em particular deve ser interpretada –markup language ou linguagem de marcas: conjunto de convenções com marcas para codificar textos Permite a ligação com outros documentos via links (palavras chaves ou imagens realçadas no texto)

4 Características Arquivos ASCII Também chamados de páginas HTML –cada documento HTML é uma página Páginas HTML são visualizadas por um programa chamado browser (paginador) Existem editores e conversores específicos para HTML

5 Linguagem HTML Existem diferentes browsers no mercado, e nem todos aceitam todos os comandos HTML Browsers mais usados: Internet Explorer e Netscape Navigator

6 Histórico Standard Generalized Markup Language –padrão internacional para descrição de documentos eletrônicos (USA, Canadá e Comunidade Européia) nas indústrias aéreas, automotivas e defesa Tim Berners-Lee –fim dos anos 80 / CERN (Laboratório Europeu de Física de Partículas, Suíça)

7 Histórico Criação do W3C (World Wide Web Consortium) definição do HTML 1.0 Utilização da linguagem HTML para tornar públicos documentos, artigos e pesquisas Independência de plataforma Criação do HTTP (HyperText Transfer Protocol) no NCSA

8 Características TAGs para marcação de texto Âncoras para implementação de hipertexto Endereçamento por URLs (Uniform Resource Locators) protocolo://servidor/caminho_do_documento/nome_do_documento

9 Visão Geral Um documento HTML é um arquivo texto simples que contém marcadores (tags) HTML Geralmente os tags são utilizados para identificar a estrutura do documento, comandos de formatação e identificar ligações de hipertextos

10 Visão Geral (2) Com HTML você poderá identificar: –O título do documento –Estrutura hierárquica do documento (níveis de cabeçalho e nomes de seção) –Listas numeradas, não numeradas –Inserção de imagens –Ênfase especial para palavras chaves ou frases –Áreas preformatadas de documentos –Ligações para outros documentos

11 Visão Geral (3) Inicialmente com HTML você não podia: –Definir tipo de letra para o documento –Tamanho da letra –Altura e Largura da tela –Alinhamento, espaçamento, quebra de linhas no texto –Cores Atualmente, com versões novas de HTML pode-se definir várias destas características. Dependerá de seu browser suportar as versões mais novas de HTML. Versão atual 3.2

12 Visão Geral (4) Sintaxe de tags HTML –Tags são encapsulados entre –Geralmente utilizados em pares da forma texto ou objeto –Alguns tags podem ser utilizados na forma standalone, sem a utilização de tags finalizadores –Alguns tags requerem opções e deve-se definí- las da forma texto

13 Introdução à linguagem HTML 3.2 Desenvolvida no início de 1996 pelo W3 em conjunto com os fabricantes: IBM, Microsoft, Netscape, Novell, SoftQuad, SpyGlass e Sun Possibilita a utilização de: –tabelas –applets –fluxo de texto envolvendo imagens –Compatibilidade total com HTML 2.0

14 Estrutura de um documento HTML Três pares de tags para criar o mais alto nível na estrutura do documento: Documento Informações de cabeçalho Corpo do documento

15 Estrutura do documento HTML

16 Esqueleto de um documento HTML Elementos de Cabeçalho Elementos de Corpo do texto e conteúdo

17 ALERTA Formatação do arquivo texto com os comandos HTML não importa no resultado final, portanto, utilize de indentação, quebra de linhas e quaisquer outros recursos para facilitar as manutenção posterior! Espaços (espaço, quebra de linha) extras são tratados como um único espaço Formatação do arquivo texto com os comandos HTML não importa no resultado final, portanto, utilize de indentação, quebra de linhas e quaisquer outros recursos para facilitar as manutenção posterior! Espaços (espaço, quebra de linha) extras são tratados como um único espaço

18 Exemplo de Documento Exemplo de documento HTML Exemplo de Documento HTML Para demonstrar estilo HTML Hello World. Data de Criação: 10 de abril de 1997 galdino

19 Tags Utilizados texto texto texto

20 Elementos de Cabeçalho Contém o cabeçalho Você sempre pode omitir do cabeçalho do documento os tags Elementos: –TITLETítulo do Documento (Obrigatório) –ISINDEXPara procura de palavras chaves –BASEDefine a URL base para resover URL relativas –METADefine relações Nome-Valor –LINKDefinir relações entre documentos

21 TITLE Requer tags de início e fim Todo documento HTML deve conter exatamente um título Pode-se utilizar acentuação, mas não marcadores para itálico, bold, ou qualquer outra formatação. Exemplo: – Curso de HTML 3.2

22 ISINDEX Não necessita de tag finalizador Indica que o agente (browser) deve prover uma linha simples para responder uma pergunta Não há restrições de quantos nem quais caracteres serão utilizados. Atributo Prompt especifica o texto da pergunta Usuário digita ENTER:String Query é enviado para o documento BASE para esse documento através da passagem de argumentos (URL?ARG1+ARG2+…)

23 BASE Não necessita da utilização de tag de final Define a URL base a ser utilizada por um documento Na ausência do elemento BASE será utilizado a URL do próprio documento Definição através da cláusula href Exemplo: –

24 Uso do tag Usado para especificar uma URL base para todos os arquivos referenciados em um documento HTML

25 META Não necessita de finalização Incluir propriedades através de pares nome-valor para o documento –Autor, Data de expiração, Lista de Palavras Chaves Exemplo: – HTTP-EQUIV pode ser utilizado no lugar de NAME para criar um estilo RFC822 na resposta. –Data de expiração, Reload –Deve-se verificar o RFC822 (HTTP) para ver quais opções existem.

26 Usos do tag

27 LINK Não necessita tag de finalização Método independente de definir relacionamentos com outros documentos e recursos Poucos browsers interpretam seu conteúdo Elementos de LINK podem ser a princípio: –Menus e Barras de ferramenta para documentos –Controle de como arquivos são utilizados em documentos impressos –Ligar recursos associados como folhas de estilo e scripts –Prover formas alternativas do documento corrente

28 Elementos de LINK Href, especifica a URL do recurso associado REL, relação forward REV, relação reversa TITLE, Título para o recurso associado Mais utilizados: – –rel=contents –rel=index –rel=glossary –rel=copyright rel=next rel=previous rel=help rel=search

29 Elementos de BODY Conterá o corpo do documento Ambos os tags podem ser omitidos Pode conter uma grande variedade de elementos: –Títulos (H1-H6) –Elemento de endereço –Elementos a nível de bloco –Elementos a nível de texto

30 Atributos de Podem ser utilizados: –BACKGROUND, URL da imagem de fundo –BGCOLOR, cor de fundo –TEXT, cor do texto –LINK, cor de marcador de ligação –VLINK, cor de marcador de ligação já visitado –ALINK, cor de marcador de ligação quando clicado Cores: –Nomes: Black, Silver, Gray, White, Green, Red, Purple, Yellow, Blue, Aqua –RGB: #RRGGBB

31 Adicionando cores Padrão RGB em hexadecimal ( ) Cor Branco Vermelho Amarelo Aquamarine Ouro Código #FFFFFF #FF0000 #FFFF00 #70DB93 #CD8F32

32 Escopo Especifica o corpo do documento; a parte que é realmente visualizada no browser indica uma figura de fundo replicada em toda a página especifica as cores para texto, fundo e links

33 Elementos de Bloco e Texto Maioria dos elementos que formam um documento pertence a uma dessas duas classes. Elementos de Bloco causam quebra de parágrafo no texto, elementos de texto não Elementos de Bloco mais comuns: –Títulos: (H1-H6), Parágrafos (P), Listas de Ítens (LI), Linhas Horizontais (HR) Elementos de Texto mais comuns: –Caracteres de ênfase (em,I,b,font), âncoras de hipertexto (a), objetos (img,applet) e quebras de linhas (br)

34 Elementos de Endereço (ADDRESS) Requer tags de início e fim e especifica informações como autoria e formas de contato para o documento corrente. Conteúdo restrito a elementos de texto Exemplo: Coordenação de Comunicação Social João da Silva Rua Lavras, 285 Belo Horizonte

35 Elementos de Bloco Parágrafos Listas Ordinárias Listas Numeradas Listas de Definição Texto Pré-formatado Divisão do Documento Alinhamento Central Texto Indentado Formulário - CGI Formulários Primitivos Linhas Horizontais Tabelas

36 Parágrafos Tag: texto Requerem o tag de início, tag de finalização é opcional. Utilize o atributo ALIGN para ajustar o alinhamento horizontal do texto dentro do parágrafo. – Alinhamento a direita – Alinhamento centrado – Alinhamento a esquerda Padrão é alinhamento a esquerda

37 Listas Listas ordenadas – e –Itens: Listas não-ordenadas – e –Itens:

38 Lista Ordinária Tags: – – Primeiro ítem – Segundo ítem – Atributos: –Compact, tenta reduzir espaço –Type,tipo do marcador utilizado disc, square, circle

39 Lista Numerada Tags: – – Primeiro Ítem – Segundo Ítem – Atributos: –OL START, define o número inicial –LI VALUE, valor para o ítem –OL TYPE, tipo de numeração a ser utilizada

40 Estilo de Numeração Type=1, Números indo-arábicos (1,2,3,…) Type=a, Alfabeto minúsculo (a,b,c,…) Type=A, Alfabeto Maiúsculo (A,B,C,…) Type=i, Algorismos romanos minúsculos (i,ii,iii,…) Type=I, Algorismos romanos maiúsculos (I,II,III,…)

41 Listas Lista de Definições Termo a ser definido Definição do termo Novo Termo Definição do novo termo

42 Texto Pré-formatado Utilização dos tags: Texto Conteúdo de Texto não será interpretado como comando HTML e será mostrado na forma em que está Digitado com espaçamento, quebra de linhas e quaisquer caracteres Cuidados com a utilização do Caractere TAB - será substituído pelo número de espaços necessários para ocupar 8 espaços.

43 Divisores e Centralização Elementos: – Devem ter início e fim Atributo: –ALIGN, pode ser center, left ou right Center é equivalente a um

44 Divisores de texto Parágrafo: e Alinhamento: Forçando Centralização: Quebra de linha: Linha horizontal: Alinhamento: Espessura: Tamanhos:

45 Bloco de Texto Indentado Tag: Texto Geralmente utilizado para citações, etc…

46 Formulários Utilizados para criar formulários com a linguagem HTML Possibilidade de mais de um formulário em cada documento Para formulários simples, pode-se utilizar os elementos ISINDEX Campos de formulário podem ser: campo de texto com linhas simples, campo de texto com múltiplas linhas, radio buttons, caixas de checagem, e menus

47 Formulários Tag: Atributos: –action: URL a ser invocada com a ação –method: Ação de HTTP que será utilizada para enviar o conteúdo do formulário para o servidor: GET ou POST. –Enctype: determina o mecanismo utilizado para codificar o conteúdo do formulário. Padrão é application/x-www-form-urlencoded

48 Linhas Horizontais Utilizadas para a divisão do texto Tag utilizado: Atributos : –Align, alinhamento (center,left,right) Padrão=center –noshade, Desenhar a linha como cor sólida e não como um sulco na página –size, peso da linha (altura) em pixels –width, Largura da linha. Pode ser informada em pixels ou então em porcentagem da janela utilizada. Padrão=100%

49 Tabelas Recurso muito utilizado para fazer formatação das páginas (geralmente utilizadas sem bordas) Definição a partir de linhas da tabela e campos dentro da linha

50 Tabelas - Forma Geral Descrição da Tabela Primeira Célula Segunda Célula …

51 Tag Requer Tags de início e fim Suporta uma série de atributos: –align (center,left,right) –width (valor em pixels ou porcentagem) –border (tamanho da grade da tabela em pixels, tamanho igual a zero suprime a exibição da grade) –cellspacing (espaço existente dentro da grade da tabela) –cellpadding (espaço entre a borda de uma célula e seu conteúdo)

52 Parâmetros de tabelas Adição de borda – Largura da tabela: – Distância entre as células – Distância entre célula e seu conteúdo: –

53 Tag Definição do texto descritivo da tabela Apenas um atributo: –ALIGN, assume os valores TOP ou BOTTOM e define a localização da descrição em relação à Tabela

54 Tag Pode ser omitido o Tag de finalização Inicia uma nova linha na tabela Funciona com um container de células Apresenta dois atributos: –align, alinhamento horizontal padrão para as células daquela linha (left,center, right) –valign, alinhamento vertical padrão para as células da linha (bottom, midle, top)

55 Tags e Definidores de células: –TH - Títulos de células da Tabela –TD - Células ordinárias Tags finalizadores podem ser omitidos Atributos –NOWRAP, desabilita a quebra de linhas automática –ROWSPAN, Número de linhas ocupadas pela célula (Padrão é 1) –COLSPAN, Número de colunas ocupadas pela célula (Padrão é 1) –ALIGN, Alinhamento Horizontal (Left,Center,Right) –VALIGN, Alinhamento Vertical (Bottom,Midle,Top) –WIDTH,sugestão de tamanho em pixels da célula –HEIGHT, sugestão de altura para a célula

56 Tabelas Coluna 1 Coluna 2 Célula 1.1 Célula 1.2 Célula 2.1 Célula 2.2

57 Exemplo de Tabela Data Evento 18/04 Apresentação HTML 19/04 Preparação para Curso Texto Indentado a 200 pixel

58 Parâmetros de títulos, linhas e colunas Determinação da largura – Alinhamento (CENTER, LEFT, RIGHT) – Alinhamento vertical ( TOP, BOTTOM, MIDDLE ) – Número de colunas que uma célula pode ocupar (TH e TD somente) – Número de linhas que uma célula pode ocupar (TH e TD somente) –

59 Elementos de Texto Elementos de estilo de Fonte Elementos de Frase Campos de formulário Elementos de âncora Imagens em linha Applets Java Quebras de Linha Mapas de imagem

60 Formatação Negrito: e Itálico: e Subescrito: e Superescrito: e Fonte monoespaçada: e Texto pré-formatado: e Controle de fonte (de 1 a 7): – M aior – M enor Controle de cor: Texto Centralização:

61 Elementos de Estilo de Fonte Todos eles requerem tags de início e fim Podem ser aninhados – é correto – incorreto Vários Tipos: –Monoespaçado –Itálico –Negrito –Sublinhado –Riscado,etc

62 Elementos de estilo de fonte - Monoespaçado - Itálico - Negrito - Sublinhado - Riscado - Letra Grande - Letra Pequena - Sobreescrito - Superescrito

63 Caracteres Especiais

64 Acentuação

65 Elementos de Frase - texto enfatizado (itálico) - Enfatizado (bold) - Definição - Programas - Utilizado para exemplos de execução - Entrada do teclado - Variáveis ou argumentos - Citação e referências

66 Limites da formatação O usuário pode configurar o tamanho da fonte no browser Usualmente não se pode especificar uma fonte específica (Times New Roman altura 18) em um documento HTML

67 Campo de Formulários Três tipos de campos: –INPUT (linha simples, senha, checkbox, radio buttons, botões de submissão e reset, upload de arquivos, botões gerais - imagens ou texto) –SELECT ( utilizados para menus de escolha simples ou múltipla escolha) –TEXTAREA (utilizados para entradas com múltiplas linhas) Conteúdo do elemento pode ser utilizado para inicializar o campo no formulário

68 Formulários Entrada de dados é necessária: –Pesquisa em banco de dados –Questionários para usuários Formulários possuem duas faces –A face da entrada de dados Página WWW que formata a entrada de dados –Programa para processar os dados entrados

69 Especificação de formulário Envia dados para URL quando usuário termina de fazer entrada de dados ….

70 Campos do tipo INPUT Não necessitam da utilização do tag de finalização Utilizado para entrada de dados simples Tipos de entrada (definido com atributo type): –texto, senha, checkbox, radio button, submit, imagem, reset, upload de arquivos, dados escondidos (estáticos) Outros Atributos: –name, value, checked, size, namelength, src, align

71 Tipos de entradas de dados Quadro de texto Texto Password Checkbox Radio Button Lista de seleção Botões –Envia –Limpa campos

72 Utilizado para texto em uma única linha Tamanho visível ajustado pelo atributo size (número de caracteres) Máximo de caracteres pode ser definido através do atributo maxlength Atributo name define o nome do campo (nome da variável) Atributo value para inicializar o campo com um valor padrão

73 Utilizado para atributos booleanos simples (sim ou não) ou para atributos que podem assumir vários valores simultâneos Devem ter o mesmo atributo name e atributos value diferentes Cada caixa gera um para nome/valor separadamente Utilização do atributo checked para inicializar o campo como marcado Apresenta ainda: name, value (yes ou no)

74 Atributos que podem assumir um único valor de um conjunto de opções. Cada opção deve ser definida como um com o mesmo valor para o atributo name. Atributo value será utilizado para conter o texto a ser visualizado Atributo checked utilizado para valor default, deve ser utilizado em apenas uma das opções

75 Checkbox e radio button Checkbox Radio button

76 Define um botão com característica especial que envia o conteúdo do formulário para o servidor Você pode incluir vários botões desde que utilize um atributo name distinto para cada um Atributo value conterá o texto escrito no botão

77 Utilizado para botões submit gráficos, ao invés do texto, pode-se posicionar um gráfico Atributos –align, alinhamento da imagem (idênticos ao tag ) –src, URL da imagem a ser inserida no botão –name, nome do elemento Transfere ao servidor pares de valores para x e y da localização clicada na imagem, name.x e name.y

78 Define um botão para voltar os campos de formulário para seu estado original Pode-se ajustar o rótulo do botão através do atributo value Nunca são enviados como parte do formulário para o servidor quando feito um submit

79 Provê uma maneira de anexar um arquivo ao conteúdo de um formulário Geralmente visualizado como um campo de texto associado com um botão que quando clicado invoca um browser de arquivos para a escolha. O nome do arquivo poderá ser inserido diretamente no campo de texto Atributos: –size, define o tamanho do campo de texto –maxlength, define o tamanho do nome de arquivo máximo –accept, restrição dos tipos MIME que podem ser inseridos

80 Estes campos não são visualizados no formulário, devem ser utilizados para armazenar dados estáticos nos formulários Devem ser definidos os atributos name e value

81 Combo-Box: Outro padrao Lista de selecao: Padrao Outro 1 Outro 2 Botoes: Exemplo de formulário

82 Menus Utilizado para definir seleções: –uma de muitos (drop-down) –muitos de muitos (list boxes) Requerem tags de início e fim e contém uma ou mais opções Exemplo: Baunilha Morango

83 Atributos de Name, define o nome do elemento de formulário que será passado ao servidor. Cada opção selecionada retorna um par name/value size, número de opções visíveis simultâneamente multiple, informa que os usuários podem fazer escolhas múltiplas

84 Lista de seleção e Botões Outro Padrão Outro 1 Outro 2 Padrão

85 Atributos de Selected, informa que é a opção padrão. O número de selected devem acompanhar se é uma lista de seleção única ou uma lista de seleção múltipla value, valor que será passado caso a opção seja escolhida

86 Elemento de formulário Requer a utilização de tags de início e fim Conteúdo do elemento é restrito a elementos de textos (exclui-se formulários) Texto entre tags de início e fim pode ser utilizado para inicializar o valor da área de texto Atributos –name, nome do elemento de formulário –rows, número de linhas de texto a serem exibidas –cols, nímero de colunas de texto a serem exibidas Barras de rolagem serão utilizadas

87 Funcionamento equivalente ao campo, mas ecoa somente o caracter * para esconder o texto. Atributos mais utilizados são size e maxlength

88 Quadro de texto, texto e password Quadro de texto Texto Password

89 Elementos de texto Especiais Âncora de ligação - Hipertextos Imagens em linha Applet Java Utilização de Fontes Especiais Fonte base para o documento Quebra de linhas Mapas clicáveis

90 Conceito de URL Cada link no hipertexto é composto de dois componentes: –âncora, pode ser texto ou imagem –URL, Universal Resource Locator - Endereço onde encontrar o recurso Descreve o protocolo que deve ser utilizado para o acesso ao documento, o servidor que oferece o documento, a localização do documento dentro do servidor e o nome do documento.

91 URL Protocolo: Nome do protocolo a ser utilizado na transferência do documento Endereço da Máquina: nome ou endereço IP da máquina que possui o servidor para este protocolo Caminho: caminho de diretório para o documento procurado Documento: nome do arquivo onde está armazenado o Documento Protocolo :// Endereço da Máquina / / Caminho / / Documento

92 URL absoluto x relativo Uma URL relativa assume o mesmo método de acesso, nome de servidora e caminho da URL onde o documento aparece. Utilizado para referenciar páginas dentro de uma mesma estrutura de páginas URL absoluta mostra todas as informações necessárias para localizar o documento Protocolo :// Endereço da Máquina / / Caminho / / Documento

93 URLs para mail e news news:newsgroup –news:comp.infosystems.www.providers mailto:endereço

94 Elemento de âncora - Criando ligações Texto âncora Texto âncora pode ser um texto ou uma imagem Atributos: –HREF - URL do recurso a ser ligado –NAME - Definição de um nome para ser referenciada posteriormente –REL - Relação de referência forward –REV - Relação de referência reversa –TITLE - Título para a ligação

95 Ligações para o mesmo documento Cria-se uma seção: Âncora Título Referencia-se a seção como: Âncora Volta ao topo

96 Interligando documentos HTML Uso de âncoras: –tags e – Texto Exemplos –http://www.ufmg.br –ftp://ftp.dcc.ufmg.br –news:alt.alien.visitors

97 Interligando documentos HTML Ligar uma palavra de um documento a outro no mesmo diretório: –Clique aqui Ligar uma palavra a um documento em outro sub- diretório: –Clique aqui Ligar uma palavra de um documento a uma linha específica de outro: –Clique aqui No documento B, –

98 Imagens Utilizado para inserir imagens Atributos: –SRCEndereço URL da imagem –ALTNome alternativo (imagem não carregada) –ALIGNAlinhamento em relação ao texto –HEIGHTAltura sugerida da imagem em pixels ou relativa –WIDTHLargura sugerida da imagem em pixels ou relativa –BORDERTamanho da Borda de ligação sugerida em pixels

99 Carregando imagens Adicionando imagens em HTML: Adicionando padrões de fundo:

100 Applets Java Elementos: – Tag Applet requer início e fim Utilização do TAG PARAM para passagem de parâmetros para o Applet a ser executado Texto entre Tags de início e fim deve ser utilizado para informar aos usuários de browsers que não suportam Java.

101 Exemplo de Applet Java Applet Java que desenha bolhas animadas.

102 Codebase, URL do diretório onde se localiza o código do applet Code, Arquivo que contém o applet Java compilado alt, Texto a ser inserido se o browser sabe utilizar o tag Applet mas não pode executar o applet name, Especifica um nome para a instância do applet que está sendo utilizado width e height, largura e altura da área de tela a ser utilizada em pixels align, assim como para os elementos IMG (top,midle, bottom,left,right) vspace e hspace, espaçamento horizontal e vertical

103 Name, nome do parâmetro a ser passado. Applet lê o valor através do método getParameter() value, valor a ser passado neste parâmentro Exemplo: –

104 Utilização de Fontes Especiais Utilização de Tag Texto Modificações no tamanho e cores das letras Atributos são: –SIZE, tamanho do corpo do texto Pode ser alterada de duas formas: absoluta ou relativa Absoluta: tamanho varia de 1 a 7 Relativa: ao local de utilização se fonte base incremento ou decréscimo do tamanho da fonte de 1 a 4 (-4 a +4) –COLOR, cor a ser utilizada Pode ser definida de duas formas: pelo nome ou por RGB assim como BGCOLOR no atributo BODY

105 Fonte Base para o Documento Utilizado para definir o tamanho de letra básico para um documento. A partir deste será definido o tamanho relativo utilizado com o TAG Tag utilizado Atributo –SIZE, tamanho de 1 a 7

106 Quebra de linhas Tag utilizado para realizar quebras de linhas Atributo utilizado –CLEAR, utilizado para quebrar linhas que contém imagens e forçar que o fluxo do texto vá para baixo (imagens alinhadas a esquerda e direita). Recebe como valor RIGHT, LEFT ou ALL

107 Elementos de Mapas Clicáveis Duas formas : –Pelo Servidor HTTP –Pelo Cliente Mais interessante –Pelo Cliente, pois depende somente de quem escreve a página e não do administrador do servidor HTTP Tag utilizado

108 Elemento Possui somente um atributo: NAME Define o nome associado com o mapa, deve ser informado pelo atributo USEMAP do elemento IMG Exemplo :

109 Elementos Não requer tag finalizador Cinco atributos: –SHAPE, forma da área clicável –COORDS, Coordendadas da área –HREF, URL do documento a ser visualizado quando clicado nesta área –NOHREF, área do documento que não será sensível a clique –ALT, Nome alternativo para a área

110 Atributos Shape e Coord Shape padrão é retangular (rect) Demais formatos são: circle e poly X e Y são medidos do canto superior esquerdo da imagem. Podem ser fornecidos por pixels ou porcentagem do tamanho da imagem

111 Maiores informações sobre HTML Cricket Liu, Jerry Peel, Russ Jones, Bryan Buus, & Adrian Nye - Managing Internet Information Services - OReily & Associates, Inc. Outras páginas –Copiar comandos de outras páginas


Carregar ppt "Linguagem HTML. Introdução HTML: HyperText Markup Language Linguagem de formatação lógica Suporte a hipertexto e multimídia Derivada do SGML Extensões."

Apresentações semelhantes


Anúncios Google