linguagem html. introdução html: hypertext markup language linguagem de formatação lógica...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/1.jpg)
Linguagem
HTML
![Page 2: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/3.jpg)
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)
![Page 4: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/5.jpg)
Linguagem HTML
• Existem diferentes browsers no mercado, e nem todos aceitam todos os comandos HTML
• Browsers mais usados: Internet Explorer e Netscape Navigator
![Page 6: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/6.jpg)
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)
![Page 7: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/11.jpg)
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
![Page 12: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/12.jpg)
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>
![Page 13: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/13.jpg)
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
![Page 14: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/14.jpg)
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>
![Page 15: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/15.jpg)
Estrutura do documento HTML
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
![Page 16: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/16.jpg)
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>
![Page 17: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/17.jpg)
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
![Page 18: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/18.jpg)
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>
![Page 19: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/19.jpg)
Tags Utilizados
• <TITLE> texto </TITLE>• <LINK opções>• <IMG SRC=“URL”>• <Hn> texto </Hn>• <EM> texto </EM>• <P>• <HR>• <ADDRESS> texto </ADDRESS>
![Page 20: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/21.jpg)
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>
![Page 22: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/22.jpg)
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+…)
![Page 23: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/23.jpg)
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”>
![Page 24: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/24.jpg)
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
![Page 25: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/25.jpg)
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.
![Page 26: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/26.jpg)
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’”>
![Page 27: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/27.jpg)
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
![Page 28: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/28.jpg)
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
![Page 29: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/29.jpg)
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
![Page 30: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/30.jpg)
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
![Page 31: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/31.jpg)
Adicionando cores
• Padrão RGB em hexadecimal (0 - 255)
CorBrancoVermelhoAmareloAquamarineOuro
Código#FFFFFF#FF0000#FFFF00#70DB93#CD8F32
![Page 32: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/32.jpg)
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
![Page 33: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/33.jpg)
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)
![Page 34: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/34.jpg)
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>
![Page 35: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/35.jpg)
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
![Page 36: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/36.jpg)
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
![Page 37: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/37.jpg)
Listas
• Listas ordenadas– <OL> e </OL>– Itens: <LI>
• Listas não-ordenadas– <UL> e </UL>– Itens: <LI>
![Page 38: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/38.jpg)
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
![Page 39: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/39.jpg)
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
![Page 40: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/40.jpg)
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,…)
![Page 41: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/41.jpg)
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>
![Page 42: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/42.jpg)
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.
![Page 43: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/43.jpg)
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>
![Page 44: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/44.jpg)
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%>
![Page 45: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/45.jpg)
Bloco de Texto Indentado
• Tag: <BlockQuote> Texto </BlockQuote>
• Geralmente utilizado para citações, etc…
![Page 46: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/46.jpg)
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
![Page 47: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/47.jpg)
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
![Page 48: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/48.jpg)
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%
![Page 49: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/49.jpg)
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
![Page 50: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/50.jpg)
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>
![Page 51: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/51.jpg)
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)
![Page 52: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/52.jpg)
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>
![Page 53: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/53.jpg)
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
![Page 54: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/54.jpg)
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)
![Page 55: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/55.jpg)
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
![Page 56: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/56.jpg)
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>
![Page 57: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/57.jpg)
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>
![Page 58: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/58.jpg)
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>
![Page 59: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/59.jpg)
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
![Page 60: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/60.jpg)
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>
![Page 61: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/61.jpg)
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
![Page 62: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/62.jpg)
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
![Page 63: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/63.jpg)
Caracteres Especiais
Notação Descrição< <> >
& &" “®
©
![Page 64: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/64.jpg)
Acentuação
Caractere Notação Exemploagudo á ágrave À À
circunflexo ê êtil õ õ
trema ü üCedilha Ç Ç
![Page 65: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/65.jpg)
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
![Page 66: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/66.jpg)
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
![Page 67: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/67.jpg)
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
![Page 68: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/68.jpg)
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
![Page 69: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/69.jpg)
Especificação de formulário
• Envia dados para URL quando usuário termina de fazer entrada de dados
<FORM ACTION=“URL” METHOD=POST >
….
</FORM>
![Page 70: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/70.jpg)
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
![Page 71: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/71.jpg)
Tipos de entradas de dados
• Quadro de texto
• Texto
• Password
• Checkbox
• Radio Button
• Lista de seleção
• Botões
– Envia
– Limpa campos
![Page 72: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/72.jpg)
<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
![Page 73: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/73.jpg)
<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)
![Page 74: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/74.jpg)
<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
![Page 75: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/75.jpg)
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-”>
![Page 76: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/76.jpg)
<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
![Page 77: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/77.jpg)
<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
![Page 78: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/78.jpg)
<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
![Page 79: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/79.jpg)
<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
![Page 80: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/80.jpg)
<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
![Page 81: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/81.jpg)
<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
![Page 82: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/82.jpg)
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>
![Page 83: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/83.jpg)
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
![Page 84: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/84.jpg)
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”>
![Page 85: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/85.jpg)
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
![Page 86: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/86.jpg)
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
![Page 87: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/87.jpg)
<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
![Page 88: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/88.jpg)
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>
![Page 89: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/89.jpg)
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
![Page 90: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/90.jpg)
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.
![Page 91: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/91.jpg)
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
![Page 92: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/92.jpg)
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
![Page 93: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/93.jpg)
URLs para mail e news
• news:newsgroup– news:comp.infosystems.www.providers
• mailto:endereço e-mail– mailto:[email protected]
![Page 94: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/94.jpg)
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
![Page 95: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/95.jpg)
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>
![Page 96: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/96.jpg)
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]
![Page 97: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/97.jpg)
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”>
![Page 98: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/98.jpg)
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
![Page 99: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/99.jpg)
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”>
![Page 100: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/100.jpg)
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.
![Page 101: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/101.jpg)
Exemplo de Applet Java
<applet code=“Bubbles.class”width=500 height=500>
Applet Java que desenha bolhas animadas.
</applet>
![Page 102: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/102.jpg)
<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
![Page 103: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/103.jpg)
<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”>
![Page 104: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/104.jpg)
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
![Page 105: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/105.jpg)
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
![Page 106: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/106.jpg)
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
![Page 107: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/107.jpg)
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>
![Page 108: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/108.jpg)
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>
![Page 109: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/109.jpg)
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
![Page 110: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/110.jpg)
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,…”>
![Page 111: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062312/552fc130497959413d8d5048/html5/thumbnails/111.jpg)
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