Embed Size (px)
Citation preview
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 proprietárias
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)
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
Linguagem HTML
• Existem diferentes browsers no mercado, e nem todos aceitam todos os comandos HTML
• Browsers mais usados: Internet Explorer e Netscape Navigator
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)
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
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
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
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
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
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>
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
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>
Estrutura do documento HTML
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
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>
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 Espaços (espaço, quebra de linha) extras são tratados como um único espaçosã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 Espaços (espaço, quebra de linha) extras são tratados como um único espaçosão tratados como um único espaço
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>
<P>
Hello World.
<P>
<HR>
Data de Criação: <em> 10 de abril de 1997 </em>
<HR>
<ADDRESS> <A HREF=“galdino.html”>galdino</a>
</BODY>
</HTML>
Tags Utilizados
• <TITLE> texto </TITLE>• <LINK opções>• <IMG SRC=“URL”>• <Hn> texto </Hn>• <EM> texto </EM>• <P>• <HR>• <ADDRESS> texto </ADDRESS>
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
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>
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+…)
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”>
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
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.
Usos do tag <META>
<META HTTP-EQUIV=“Expires” CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
<META HTTP-EQUIV=“Keywords” CONTENT=“Nanotechnology, Biochemistry”>
<META HTTP-EQUIV=“Reply-to” CONTENT=“[email protected] (Dave Raggett)”>
<META HTTP-EQUIV=“Refresh” CONTENT=“3; url= ‘http://www.yahoo.com’”>
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
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
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
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
Adicionando cores
• Padrão RGB em hexadecimal (0 - 255)
CorBrancoVermelhoAmareloAquamarineOuro
Código#FFFFFF#FF0000#FFFF00#70DB93#CD8F32
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
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)
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>
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
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
Listas
• Listas ordenadas– <OL> e </OL>– Itens: <LI>
• Listas não-ordenadas– <UL> e </UL>– Itens: <LI>
Lista Ordinária• Tags:
– <UL>
– <LI> Primeiro ítem
– <LI> Segundo ítem
– </UL>
• Atributos:– Compact, tenta reduzir espaço
– Type, tipo do marcador utilizadodisc, square, circle
Lista Numerada• Tags:
– <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
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,…)
Listas
• Lista de Definições<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>
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.
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>
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%>
Bloco de Texto Indentado
• Tag: <BlockQuote> Texto </BlockQuote>
• Geralmente utilizado para citações, etc…
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
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
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%
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
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>
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)
Parâmetros de tabelas
• Adição de borda– <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>
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
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)
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
Tabelas
<TABLE><TH> Coluna 1</TH><TH> Coluna 2</TH><TR><TD> Célula 1.1</TD><TD> Célula 1.2</TD></TR><TR><TD> Célula 2.1</TD><TD> Célula 2.2</TD><TR></TABLE>
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>
</table>
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>
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
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>
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
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
Caracteres Especiais
Notação Descrição< <> >
& &" “®
©
Acentuação
Caractere Notação Exemploagudo á ágrave À À
circunflexo ê êtil õ õ
trema ü üCedilha Ç Ç
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
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
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
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
Especificação de formulário
• Envia dados para URL quando usuário termina de fazer entrada de dados
<FORM ACTION=“URL” METHOD=POST >
….
</FORM>
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
Tipos de entradas de dados
• Quadro de texto
• Texto
• Password
• Checkbox
• Radio Button
• Lista de seleção
• Botões
– Envia
– Limpa campos
<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
<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)
<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
Checkbox e radio button
• Checkbox
<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-”>
<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
<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
<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
<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
<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
<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>
Exemplo de formulário
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>
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
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”>
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
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
<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
Quadro de texto, texto e password
• Quadro de texto
<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>
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
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.
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
ProtocoloProtocolo ://:// Endereço da MáquinaEndereço da Máquina // CaminhoCaminho // DocumentoDocumento
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
ProtocoloProtocolo ://:// Endereço da MáquinaEndereço da Máquina // CaminhoCaminho // DocumentoDocumento
URLs para mail e news
• news:newsgroup– news:comp.infosystems.www.providers
• mailto:endereço e-mail– mailto:[email protected]
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
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>
Interligando documentos HTML
• Uso de âncoras:– tags <A> e </A>
– <A HREF=“url”>Texto</A>
• Exemplos
– http://www.ufmg.br
– ftp://ftp.dcc.ufmg.br
– news:alt.alien.visitors
– mailto:[email protected]
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”>
Imagens<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
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”>
Applets Java• Elementos:
– <APPLET Opções>
– <PARAM Opções>
– </APPLET>
• 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.
Exemplo de Applet Java
<applet code=“Bubbles.class”width=500 height=500>
Applet Java que desenha bolhas animadas.
</applet>
<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
<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”>
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
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
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
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>
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 …>
<area …>
</map>
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
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,…”>
Maiores informações sobre HTML
• http://www.w3.org
• http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.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
