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

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

Linguagem HTML.

Apresentações semelhantes


Apresentação em tema: "Linguagem HTML."— 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 Tim Berners-Lee
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 protocolo://servidor/caminho_do_documento/nome_do_documento
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 < e > Geralmente utilizados em pares da forma <tag> texto ou objeto </tag> 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 <tag opção1 opção2 ... opçãon> texto </tag>

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: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”> <HTML> Documento </HTML> <HEAD> Informações de cabeçalho </HEAD> <BODY> Corpo do documento </BODY>

15 Estrutura do documento HTML
<HEAD> </HEAD> <BODY> </BODY> </HTML>

16 Esqueleto de um documento HTML
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”> <HTML> <HEAD> Elementos de Cabeçalho </HEAD> <BODY> Elementos de Corpo do texto e conteúdo </BODY> </HTML>

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

18 Exemplo de Documento <HTML> <HEAD>
<TITLE>Exemplo de documento HTML</TITLE> </HEAD> <BODY> <IMG SRC=“mylogo.gif” ALT=“Logotipo”> <H1>Exemplo de Documento HTML</H1> <EM>Para demonstrar estilo HTML</EM> <P> <HR> Hello World. Data de Criação: <em> 10 de abril de 1997 </em> <ADDRESS> <A HREF=“galdino.html”>galdino</a> </BODY> </HTML>

19 Tags Utilizados <TITLE> texto </TITLE> <LINK opções>
<IMG SRC=“URL”> <Hn> texto </Hn> <EM> texto </EM> <P> <HR> <ADDRESS> texto </ADDRESS>

20 Elementos de Cabeçalho <HEAD>
Contém o cabeçalho Você sempre pode omitir do cabeçalho do documento os tags <HEAD> </HEAD> Elementos: TITLE Título do Documento (Obrigatório) ISINDEX Para procura de palavras chaves BASE Define a URL base para resover URL relativas META Define relações Nome-Valor LINK Definir 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: <TITLE> Curso de HTML 3.2 </TITLE>

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: <BASE href=“http://www.redeminas.br”>

24 Uso do tag <BASE>
<BASE HREF=“http://www.cenapad.ufmg.br/docs/”> 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: <META NAME=“Author” CONTENT=“João Galdino”> 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 <META>
<META HTTP-EQUIV=“Expires” CONTENT="Tue, 04 Dec :29:02 GMT"> <META HTTP-EQUIV=“Keywords” CONTENT=“Nanotechnology, Biochemistry”> <META HTTP-EQUIV=“Reply-to” (Dave Raggett)”> <META HTTP-EQUIV=“Refresh” CONTENT=“3; url= ‘http://www.yahoo.com’”>

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: <LINK REL=top href=URL> 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 <BODY e </BODY> 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 <BODY>
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 Cor Código Adicionando cores Branco Vermelho Amarelo Aquamarine Ouro
Padrão RGB em hexadecimal ( ) Cor Branco Vermelho Amarelo Aquamarine Ouro Código #FFFFFF #FF0000 #FFFF00 #70DB93 #CD8F32

32 Escopo <BODY> Especifica o corpo do documento; a parte que é realmente visualizada no browser <BODY BACKGROUND=“fundo.gif”> indica uma figura de fundo replicada em toda a página <BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#FF0000 VLINK=#CC0000 ALINK=#FFFFFF> 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: <ADDRESS> Coordenação de Comunicação Social <BR> João da Silva <BR> Rua Lavras, 285 <BR> Belo Horizonte </ADDRESS>

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: <P Atributos> texto</p>
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. <P ALIGN=RIGHT> Alinhamento a direita <P ALIGN=CENTER> Alinhamento centrado <P ALIGN=LEFT> Alinhamento a esquerda Padrão é alinhamento a esquerda

37 Listas Listas ordenadas <OL> e </OL> Itens: <LI>
Listas não-ordenadas <UL> e </UL>

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

39 Lista Numerada Tags: Atributos: <OL> <LI> Primeiro Ítem
<LI> Segundo Ítem </OL> 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 <DL> </DL>
<DT> Termo a ser definido </DT> <DD> Definição do termo</DD> <p> <DT> Novo Termo </DT> <DD> Definição do novo termo</DD> </DL>

42 Texto Pré-formatado Utilização dos tags: <PRE> Texto </PRE> 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: <DIV> </DIV> <CENTER> </CENTER> Devem ter início e fim Atributo: ALIGN, pode ser center, left ou right Center é equivalente a um <div align=center>

44 Divisores de texto Parágrafo: <P> e </P>
Alinhamento: <P ALIGN=RIGHT> Forçando Centralização: <CENTER> </CENTER> Quebra de linha: <BR> Linha horizontal: <HR> Alinhamento: <HR ALIGN=CENTER> Espessura: <HR SIZE=6> Tamanhos: <HR WIDTH=80%>

45 Bloco de Texto Indentado
Tag: <BlockQuote> Texto </BlockQuote> 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: <FORM atributos> 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: <HR Atributos> 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 <TABLE BORDER=3 CELLSPACING=2 WIDTH=“80%”>
<CAPTION> Descrição da Tabela </CAPTION> <TR><TD>Primeira Célula</TD><TD>Segunda Célula</TD> <TR> … </TABLE>

51 Tag <TABLE> </TABLE>
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:
<TABLE BORDER=2> Largura da tabela: <TABLE WIDTH=50%> <TABLE WIDTH=200> Distância entre as células <TABLE CELLSPACING=2> Distância entre célula e seu conteúdo: <TABLE CELLPADDING=2>

53 Tag <CAPTION> </CAPTION>
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 <TR> </TR>
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 <TH> </TH> e <TD> </TD>
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 <TABLE> <TH> Coluna 1</TH>
<TR> <TD> Célula 1.1</TD> <TD> Célula 1.2</TD> </TR> <TD> Célula 2.1</TD> <TD> Célula 2.2</TD> </TABLE>

57 Exemplo de Tabela <table width=100% border=1>
<tr><td>Data</td><td>Evento</td></tr> <tr><td>18/04</td><td>Apresentação HTML </td></tr> <tr><td>19/04</td><td>Preparação para Curso</td></tr> </table> <table border=0> <tr><td width=“200”></td> <td>Texto Indentado a 200 “pixel”</td> </tr>

58 Parâmetros de títulos, linhas e colunas
Determinação da largura <TH WIDTH=50%> Alinhamento (CENTER, LEFT, RIGHT) <TD ALIGN=CENTER> Alinhamento vertical (TOP, BOTTOM, MIDDLE) <TR VALIGN=BOTTOM> Número de colunas que uma célula pode ocupar (TH e TD somente) <TD COLSPAN=2> Número de linhas que uma célula pode ocupar (TH e TD somente) <TH ROWSPAN=2>

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: <B> e </B>
Itálico: <I> e </I> Subescrito: <SUB> e </SUB> Superescrito: <SUP> e </SUP> Fonte monoespaçada: <CODE> e </CODE> Texto pré-formatado: <PRE> e </PRE> Controle de fonte (de 1 a 7): <FONT SIZE=+2>M</FONT>aior <FONT SIZE=-2>M</FONT>enor Controle de cor: <FONT COLOR=#00FF00>Texto</FONT> Centralização: <CENTER> </CENTER>

61 Elementos de Estilo de Fonte
Todos eles requerem tags de início e fim Podem ser aninhados <Início1> <Início2> <Fim2> <Fim1> é correto <Início1><Início 2> <Fim1> <Fim2> incorreto Vários Tipos: Monoespaçado Itálico Negrito Sublinhado Riscado,etc

62 Elementos de estilo de fonte
<tt> </tt> - Monoespaçado <I> </I> - Itálico <B> </B> - Negrito <U> </U> - Sublinhado <STRIKE> </STRIKE> - Riscado <BIG> </BIG> - Letra Grande <SMALL> </SMALL> - Letra Pequena <SUB> </SUB> - Sobreescrito <SUP> </SUP> - Superescrito

63 Caracteres Especiais

64 Acentuação

65 Elementos de Frase <em> </em> - texto enfatizado (itálico)
<strong> </strong> - Enfatizado (bold) <dfn></dfn> - Definição <code></code> - Programas <samp></samp> - Utilizado para exemplos de execução <kbd></kbd> - Entrada do teclado <var> </var> - Variáveis ou argumentos <cite> </cite> - 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 <FORM ACTION=“URL” METHOD=POST > …. </FORM>

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 <input type=text>
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 <input type=checkbox>
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 <input type=radio>
Atributos que podem assumir um único valor de um conjunto de opções. Cada opção deve ser definida como um <input type=radio> 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
<INPUT TYPE=“checkbox” NAME=“Possui carro” checked> Radio button <INPUT TYPE=“radio” NAME=“faixa etaria” VALUE=“20+”> <INPUT TYPE=“radio” NAME=“Faixa etaria” VALUE=“20-”>

76 <input type=submit>
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 <input type=image>
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 <IMG>) 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 <input type=reset>
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 <input type=file>
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 <input type=hidden>
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 Exemplo de formulário <p>Combo-Box: <select name="combo">
<option> Outro<option selected> padrao</select> <p>Lista de selecao: <select name="lista" size=2> <option SELECTED> Padrao<option> Outro 1<option> Outro 2 </select> <p>Botoes: <input type="reset" value="Limpa campos"> <input type="submit" value="Envia campos"> </form></body></html>

82 Menus <select> 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: <SELECT NAME=“Sabor”> <OPTION VALUE=a>Baunilha <OPTION VALUE=b>Morango </SELECT>

83 Atributos de <SELECT>
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
<SELECT NAME=“lista”> <OPTION> Outro <OPTION SELECTED> Padrão </SELECT> <SELECT NAME=“lista” SIZE=2> <OPTION> Outro 1 <OPTION> Outro 2 <OPTION SELECTED> Padrão </SELECT> <INPUT TYPE=“Reset” VALUE=“Limpa Campos”> <INPUT TYPE=“submit” VALUE=“Envia Campos”>

85 Atributos de <OPTION>
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 <TEXTAREA>
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 <input type=password>
Funcionamento equivalente ao campo <input type=text>, mas ecoa somente o caracter * para esconder o texto. Atributos mais utilizados são size e maxlength

88 Quadro de texto, texto e password
<TEXTAREA NAME=“Comentario” ROWS=5 COLS=20></TEXTAREA> Texto <INPUT TYPE=“text” NAME=“Nome” SIZE=40> Password <INPUT TYPE=“password” NAME=“Password” SIZE=8 MAXLENGTH=8>

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 :// Endereço da Máquina / Caminho Documento 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

92 URL absoluto x relativo
Protocolo :// Endereço da Máquina / Caminho Documento 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

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

94 Elemento de âncora - Criando ligações
<A opção1 opçãoN>Texto âncora</A> 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: <A NAME=“NOME-SEÇÃO”>Âncora</A> <A NAME=“topo_página”>Título</A> Referencia-se a seção como: <A HREF=“#NOME-SEÇÃO”>Âncora</A> <A HREF=“#topo_página”>Volta ao topo</A> <A HREF=“URL#topo_página”>Volta ao topo</A>

96 Interligando documentos HTML
Uso de âncoras: tags <A> e </A> <A HREF=“url”>Texto</A> Exemplos 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 <A HREF=“doc2.html”>aqui</A> Ligar uma palavra a um documento em outro sub-diretório: Clique <A HREF=“../sub/doc2.html”>aqui</A> Ligar uma palavra de um documento a uma linha específica de outro: Clique <A HREF=“doc2.html#marca”>aqui</A> No documento B, <A name=“marca”>

98 Imagens Utilizado para inserir imagens <IMG> Atributos:
<IMG SRC=“URL” ALT=“Nome” ALIGN=TOP|MIDDLE|BOTTOM> Utilizado para inserir imagens <IMG> Atributos: SRC Endereço URL da imagem ALT Nome alternativo (imagem não carregada) ALIGN Alinhamento em relação ao texto HEIGHT Altura sugerida da imagem em pixels ou relativa WIDTH Largura sugerida da imagem em pixels ou relativa BORDER Tamanho da Borda de ligação sugerida em pixels

99 Carregando imagens Adicionando imagens em HTML:
<IMG SRC=“URL” ALIGN=RIGHT WIDTH=X HEIGHT=Y ALT=“desc”> Adicionando padrões de fundo: <BODY BACKGROUND=“URL”>

100 Applets Java Elementos: <APPLET Opções> <PARAM Opções>
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 code=“Bubbles.class”width=500 height=500> Applet Java que desenha bolhas animadas. </applet>

102 <Applet Opções>
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 <param Opções> 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: <param name=snd value=“welcome.au”>

104 Utilização de Fontes Especiais
Utilização de Tag <FONT Opções> Texto </FONT> 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 <FONT> Tag utilizado <FONTBASE Atributo> Atributo SIZE, tamanho de 1 a 7

106 Quebra de linhas Tag utilizado para realizar quebras de linhas <BR Atributo> 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 <MAP Atributos> <AREA Atributos> </MAP>

108 Elemento <MAP Atributos>
Possui somente um atributo: NAME Define o nome associado com o mapa, deve ser informado pelo atributo USEMAP do elemento IMG Exemplo: <img src=“barra.gif” border=0 usemap=“#mapa1”> <map name=“mapa1”> <area …> </map>

109 Elementos <area atributos>
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 <area shape=rect coord=“x_esq,y_topo,x_direita,y_baixo”> <area shape=circle coord=“x_centro,y_centro,raio”> <area shape=poly cood=“x1,y1,x2,y2,x3,y3,…”>

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


Carregar ppt "Linguagem HTML."

Apresentações semelhantes


Anúncios Google