Hiperm

1
Hipermídia

• Aula 3

2
Hipertexto

• Pode ser armazenado, lido, ou editado.
• Contém conexões dentro do texto para outros
  documentos.
• Hipermídia pode ser uma expansão do conceito de
  hipertexto que contempla outras mídias.

3
Hipermídia

• Considerada como uma ferramenta para a
  aprendizagem.
• Vantagens
• Flexibilidade.
• Grande capacidade de exploração de informações
  relevantes.
• O leitor deve dar significado às ligações.

4
HTML - Hyper Text Markup Language

• Permite criar páginas Web.
• Pode ser vista por qualquer pessoa utilizando um
  navegador.
• Pode conter texto, imagem, som e vídeo.

5
HTML

• Editores de páginas HTML
• Facilitam o processo de criação.
• Exemplo
• Comuns
• Word
• Especializados
• Microsoft FrontPage
• Natscape Composer
• DreamWeaver

6
Comandos HTML

• Controlam a maneira como o conteúdo de uma página
  é exibido no navegador.
• Também chamados de diretivas ou tags

lthtmlgt ltheadgt lttitlegtExemplo iniciallt/titlegt lt/headgt ltbodygt  lt/bodygt lt/htmlgt
7
Exemplo de código HTML

• lthtmlgt
• ltheadgt
• lttitlegtExemplo iniciallt/titlegt
• lt/headgt
• ltbodygt
• Este é o meu primeiro documento hipertexto
  escrito na linguagem HTML.
• lt/bodygt
• lt/htmlgt

8
Página HTML resultante
9
Diretivas

• Trechos especiais de texto, geralmente destacados
  por algum caractere delimitador.
• lttitlegt lt/titlegt

Caracteres delimitadores
Diretiva de fechamento
Diretiva de abertura
10
Diretivas HTML

• Sensíveis ao tipo de caixa
• Diretivas válidas
• ltTitlegt, ltHeAdgt, ltPgt, ltbrgt
• Não deve haver espaço em branco nem quebra de
  linha entre o sinal de menor lt e o nome da
  diretiva.
• Diretiva inválidas
• lt   TITLEgt
• ltPgt

11
Diretivas HTML

• Uma diretiva
• Não aparece no navegador.
• É identificada e interpretada pelo navegador.
• Produz algum efeito visual ou de estrutura lógica
  no documento hipertexto.
• Informações que não forem diretivas, devem ser
  textos e fazer parte do conteúdo do documento.
• ltPgt Este parágrafo ...   lt/Pgt

12
Diretivas HTML

• Todo par de diretivas representa alguma
  especificação.
• Diretivas de começo e fim
• lthtmlgt e lt/htmlgt de um documento em HTML
• ltheadgt e lt/headgt do cabeçalho do documento
• ltbodygt e lt/bodygt do corpo do documento

13
Forma geral do documento

• lthtmlgt
• ltheadgt
• cabeçalho do documento lt/headgt
• ltbodygt
• corpo do documento lt/bodygt
• lt/htmlgt

14
Comentários

• Ignorados pelo navegador
• São de interesse do desenvolvedor.
• É possível inserí-los em qualquer parte do
  código.
• Devem estar entre lt!-- e gt. 
• lt!-- Este é um comentário gt  

15
Exemplo de cabeçalho
16
Cabeçalhos em HTML

• Existem seis níveis de cabeçalhos
• lth1gt, lth2gt, lth3gt, lth4gt, lth5gt e lth6gt
• Especificam o tamanho da letra utilizada, na
  ordem decrescente de tamanho.
• Exemplo
• lth1gtProgramação HTMLlt/h1gt
• lth2gtConceitos Básicoslt/h2gt
• Esta seção tratará de ...

17
Exemplo de parágrafos
18
Parágrafos em HTML

• ltPgt lt/Pgt
• diretiva para definição de parágrafos que promove
  a quebra e o espaçamento desses.
• Exemplo
• ltpgtEste é o primeiro parágrafo.lt/pgtltpgt Este é o
  segundo parágrafo.lt/pgt  

19
Exemplo de quebra de linha
20
Quebra de linha

• Diretiva ltbrgt.
• Não possui diretiva de fechamento.
• Não inicia um novo parágrafo. 
• Espaçamento do parágrafo é maior.
• Exemplo
• ltpgt Esta é a primeira linha. ltBRgt Esta é a
  segunda linha.lt/pgt

21
Lista numerada
22
Lista não numerada
23
Listas em HTML

• Listas enumeradas
• Definidas pelas diretivas ltolgt e lt/olgt.
• Listas não enumeradas
• Utilizam as diretivas ltulgt e lt/ulgt.

24
Listas em HTML

• Lista não numerada
• ltulgt ltligtDefiniçãolt/ligt
• ltligtPropriedadeslt/ligt
• ltligtResultadoslt/ligt
• lt/ulgt

• Lista numerada
• ltolgt
• ltligtConceitos Básicoslt/ligt
• ltligtApresentação da Teorialt/ligt
• ltligtConclusãolt/ligt
• lt/olgt

25
Exemplo de hiperligações
26
Hiperligações em HTML

• lta href"url"gt referêncialt/agt
• Exemplo
• Visite a lta href"http//www.bol.com.br"gt página
  do BOLlt/agt

27
Hiperligações para a própria página
28
Hiperligações para a própria página

• Ao se clicar no link, um trecho da mesma página
  será exibido.
• Útil em documentos grandes.

29
Hiperligações para a própria página
Hiperligação
Local referenciado
30
Âncoras em HTML

• Exemplo
• lth2gtPreferências Pessoaislt/h2gt
• ltulgt
• ltligtlta href"a1"gtMúsicalt/agtlt/ligt
• ltligtlta href"a2"gtComputaçãolt/agtlt/ligt
• ltligtlta href"a3"gtAutomobilismolt/agtlt/ligt
• ltligtlta href"a4"gtNataçãolt/agtlt/ligt
• ltligtlta href"a5"gtCinemalt/agtlt/ligt
• lt/ulgt
• lth2gtlta name"a1"gtMinhas músicas
  preferidaslt/agtlt/h2gt

Hiperligação
Local referenciado
31
Exercício Construa um mapa conceitual para o
texto

• Portugal, república situada na parte oeste da
  península Ibérica,
• Sua capital é Lisboa

Idéia principal
Idéias importantes
Ligações