Carregar apresentação
A apresentação está carregando. Por favor, espere
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 Exemplo:
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 <html> <head> <title>Exemplo inicial</title> </head> <body> </body> </html>
7
Exemplo de código HTML <html> <head>
<title>Exemplo inicial</title> </head> <body> Este é o meu primeiro documento hipertexto escrito na linguagem HTML. </body> </html>
8
Página HTML resultante
9
Diretivas Trechos especiais de texto, geralmente destacados por algum caractere delimitador. <title> </title> Caracteres delimitadores Diretiva de fechamento Diretiva de abertura
10
Diretivas HTML Sensíveis ao tipo de caixa Diretivas válidas:
<Title>, <HeAd>, <P>, <br> Não deve haver espaço em branco nem quebra de linha entre o sinal de menor “<“ e o nome da diretiva. Diretiva inválidas: < TITLE> < P>
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. <P> Este parágrafo ... </P>
12
Diretivas HTML Todo par de diretivas representa alguma especificação.
Diretivas de começo e fim: <html> e </html> de um documento em HTML <head> e </head> do cabeçalho do documento <body> e </body> do corpo do documento
13
Forma geral do documento
<html> <head> [cabeçalho do documento] </head> <body> [corpo do documento] </body> </html>
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 <!-- e >. <!-- Este é um comentário >
15
Exemplo de cabeçalho
16
Cabeçalhos em HTML Existem seis níveis de cabeçalhos:
<h1>, <h2>, <h3>, <h4>, <h5> e <h6> Especificam o tamanho da letra utilizada, na ordem decrescente de tamanho. Exemplo: <h1>Programação HTML</h1> <h2>Conceitos Básicos</h2> Esta seção tratará de ...
17
Exemplo de parágrafos
18
Parágrafos em HTML <P> … </P> Exemplo:
diretiva para definição de parágrafos que promove a quebra e o espaçamento desses. Exemplo: <p>Este é o primeiro parágrafo.</p><p> Este é o segundo parágrafo.</p>
19
Exemplo de quebra de linha
20
Quebra de linha Diretiva <br>.
Não possui diretiva de fechamento. Não inicia um novo parágrafo. Espaçamento do parágrafo é maior. Exemplo: <p> Esta é a primeira linha. <BR> Esta é a segunda linha.</p>
21
Lista numerada
22
Lista não numerada
23
Listas em HTML Listas enumeradas: Listas não enumeradas:
Definidas pelas diretivas <ol> e </ol>. Listas não enumeradas: Utilizam as diretivas <ul> e </ul>.
24
Listas em HTML Lista não numerada Lista numerada
<ul> <li>Definição</li> <li>Propriedades</li> <li>Resultados</li> </ul> Lista numerada <ol> <li>Conceitos Básicos</li> <li>Apresentação da Teoria</li> <li>Conclusão</li> </ol>
25
Exemplo de hiperligações
26
Hiperligações em HTML <a href="[url]"> [referência]</a>
Exemplo: Visite a <a href=" página do BOL</a>
![Hiperligações em HTML <a href= [url] > [referência]</a>](http://slideplayer.com.br/slide/46555/1/images/26/Hiperliga%C3%A7%C3%B5es+em+HTML+%3Ca+href%3D+%5Burl%5D+%3E+%5Brefer%C3%AAncia%5D%3C%2Fa%3E.jpg "Exemplo: Visite a <a href= > página do BOL</a>")
27
Hiperligações para a própria página
Clicando aqui Exibe assim
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: … Hiperligação Local referenciado
<h2>Preferências Pessoais</h2> <ul> <li><a href="#a1">Música</a></li> <li><a href="#a2">Computação</a></li> <li><a href="#a3">Automobilismo</a></li> <li><a href="#a4">Natação</a></li> <li><a href="#a5">Cinema</a></li> </ul> <h2><a name="a1">Minhas músicas preferidas</a></h2> 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 Portugal Península Ibérica Lisboa sua capital é situado Idéias importantes Ligações
Apresentações semelhantes
