1 Sistemas Multimídia Fundamentos Básicos - HTML Prof. Hemir Santiago Prof. Hemir Santiago.

1

Sistemas MultimídiaSistemas Multimídia

Fundamentos Básicos - HTML Fundamentos Básicos - HTML Prof. Hemir SantiagoProf. Hemir Santiago

2

Introdução

Representação dos Elementos

Estrutura Hierárquica

Criando um site

Agenda

3

HTML (HyperText Markup Language)

Linguagem de marcação de texto utilizada para publicação na WWW

Consiste de rótulos que marcam trechos e blocos de texto a serem utilizados por visualizador HTML (ou browser) para formatar o documento e apresentá-lo na tela.

Introdução

4


Os elementos HTML são representados no texto através de rótulos (ou tags)

O visualizador interpreta como rótulos todos os elementos HTML válidos que estejam entre ‘<‘ e ‘>’. Exemplo: <BR> é interpretado como uma quebra de linha

A maioria dos elementos HTML possuem um rótulo inicial e um rótulo final, envolvendo o texto que é marcado por ele Sintaxe básica: <Elemento> Texto marcado </Elemento>

5


Alguns elementos podem ter um ou mais atributos que definem alguma característica especial.

Os atributos, quando presentes, aparecem no rótulo inicial separados por espaços, logo após o nome do elemento. Exemplos:

<body background=“backgrounds/papel-de-parede.gif”>... corpo do documento ... </body>

<table border> ... conteúdo e rótulos de tabela ... </table> <hr noshadow width=50% size=10 align=left>

6


Seqüência de escape Esta seqüência é indicada por um “&” seguido de uma

abreviação e um ponto-e-vírgula indicando o final da seqüência.

As principais seqüências de escape necessárias para produzir “<“, “>”, “&” e aspas são:

< <

> >

& &

“ "

7


IMPORTANTE:

Toda a formatação de página é realizada exclusivamente com base na marcação do texto e pelos elementos HTML.

Somente através de elementos HTML pode-se quebrar uma linha, criar uma endentação, iniciar um novo parágrafo, etc.

Não importa se são utilizadas letras maiúsculas ou minúsculas para definir o rótulo. <BODY> = <body>

8


A estrutura básica (mínima) de uma página HTML é a seguinte:

<html><head>

<title> Título do documento </title></head><body>

Textos, imagens e links</body>

</html>

9


O elemento <html> marca o início e o final do documento.

Deve conter duas sub-estruturas distintas: o cabeçalho <head> e o corpo do documento <body>.

O bloco do cabeçalho pode conter informações sobre o conteúdo do documento. Não contém informações que serão exibidas na página.

10


O título <title> é o único elemento obrigatório do bloco do cabeçalho.

Deve conter o título do documento que aparece fora da página, na barra de título do browser.

O bloco marcado por <body> contém a parte do documento onde será colocada a informação que efetivamente será mostrada e formatada na tela do browser.

11

Criando um site

Vamos seguir os passos para criar um site sobre dinossauros.

Nele constarão os principais elementos e recursos do HTML, de forma que, seguindo os exemplos, você será capaz de utilizar os mesmos recursos na criação do seu site pessoal.

Os seguintes tópicos serão descritos: Estrutura básica Títulos, parágrafos e separadores Formatação de blocos Listas Formatação de caracteres Tabelas

12

Estrutura Básica

Crie um arquivo contendo os elementos estruturais para usar toda vez que for criar uma nova página. Exemplo: crie um arquivo template.html com o seguinte conteúdo:

<html><head><title> </title></head> <body>

</body></html>

13

Títulos, Parágrafos e Separadores

Título do documento Escreva o título entre <title> e </title> Exemplo: <title> Página sobre dinossauros </title>

Títulos e subtítulos de seção Para criar um título na área de visualização utiliza-se o

elemento <h1> ... </h1> Exemplo: <h1> Dinosaurs’ Web </h1>

14


Parágrafos Todo o texto que adicionamos na página deve estar dentro

do elemento de parágrafo, definido pelos rótulos <p> e </p>. Exemplo: <p> Esta é a página sobre tiranossauros. Aqui...<p> Este é mais um parágrafo da página sobre dinossauros.

Quebra de linhas Quando for necessário quebrar uma linha dentro de um

parágrafo deve-se usar <br> Exemplo: <p> Eu gostaria que este parágrafo tivesse três

linhas. <br> Esta seria a segunda linha <br> e esta a terceira.

15


Separadores

O elemento <hr> define uma linha horizontal. A maioria dos browsers apresentam-na como uma linha

sombreada que atravessa toda a largura da tela.

16

Formatação de Blocos

Endentação O elemento <blockquote> é utilizado para formatar um

bloco de texto como citação. Exemplo: <blockquote> “Os répteis são criaturas...

</blockquote>

Endereço <address> ... </address> marcam o início e o fim do bloco

de endereço. Pode ser usado para identificar a autoria do documento,

conter endereços para contato, e-mail e outras informações sobre o documento.

Exemplo: <address> Para mais informações entre em contato com... </address>

17

Listas

Não-ordenadas São marcadas pelos rótulos <ul> e </ul> Cada item é contido dentro de <li>, que não necessita de

rótulo de fechamento. Qualquer novo <li> ou </ul> automaticamente fecham o

item.

Ordenadas São marcadas pelos rótulos <ol> e </ol> Idênticas às listas não-ordenadas

18

Listas

Exemplo de lista não-ordenada: um pequeno sumário

<hr><h2>Sumário</h2><ul>

<li>Períodos da Era Mesozóica<li>Lista de Dinossauros<ul> <li>Tabela <li>Imagens</ul> <li> Endereço para contato

</ul>

19

Formatação de caracteres

A HTML pode marcar o texto visando uma formatação física (negrito, itálico, sublinhado, etc) Os elementos de formatação física <b> e <i> marcam o

texto como negrito e itálico, respectivamente. Exemplo:

<ol><li><b>Triássico:</b> de 250 a 208 milhões de anos atrás.<li><b>Jurássico:</b> de 208 a 144 milhões de anos atrás.<li><b>Cretáceo:</b> de 144 a 66 milhões de anos atrás.

</ol>

20

Tabelas

Os rótulos <table> ... </table> marcam o início e o final de uma tabela.

<table> só pode conter dois rótulos: <tr> (Table Row) marca uma linha de tabela <caption> marca a legenda da tabela

Cada linha pode conter uma ou mais células de dados, marcadas como <td> (Table Data) e <th> (Table Header).

Todas as linhas devem ter o mesmo número de células de dados.

21

Tabelas

Exemplo:

<table border><tr> <td> 1,1 </td> <td> 1,2 </td> <td> 1,3 </td> </tr><tr> <td> 2,1 </td> <td> 2,2 </td> <td> 2,3 </td> </tr><tr> <td> 3,1 </td> <td> 3,2 </td> <td> 3,3 </td> </tr>

</table>

Se o atributo BORDER do rótulo <table> for omitido, a tabela não terá bordas.

22

Tabelas

Outra tabela simples de três linhas e três colunas.As células da primeira linha serão marcadas com <th> para que recebam formatação de cabeçalho.Também incluímos uma legenda.

<table border><tr> <th>Dinossauro</th> <th>Nome científico</th> <th>Período</th> </tr><tr> <th>Tiranossauro</th> <th>Tyranossaurus Rex</th>

<th>Cretáceo</th> </tr><tr> <th>Velociraptor</th> <th>Desconhecido</th> <th>Cretáceo</th>

</tr>

<caption>Tabela 1</caption></table>

23

Perguntas

24

Plano de AulasAULA DATA ATIVIDADE

1 11/ago Apresentação / Introdução

2 18/ago As plataformas / Projeto

3 25/ago Os projetos / Exercícios

4 1/set Design – Recursos de Navegação / Projeto

5 8/set Design – Interfaces / Exercícios

6 15/set Princípios da animação / Projeto

7 22/set Revisão / Exercícios

8 29/set Avaliação: NP1

9 6/out Período de avaliações - NP1

10 13/out Fundamentos Básicos - HTML / Correção de prova

11 20/out Som / Projeto

12 27/out Vídeo / Exercícios

13 3/nov Produção (autoria) / Projeto

14 10/nov Apresentação de projetos

15 17/nov Revisão / Exercícios

16 24/nov Período de avaliações – NP2 (a confirmar)

17 1/dez Período de avaliações – NP2 (a confirmar)

18 8/dez Período de provas integradas institucionais – PII (a confirmar)

1 Sistemas Multimídia Fundamentos Básicos - HTML Prof. Hemir Santiago Prof. Hemir Santiago.

Documents

Transcript of 1 Sistemas Multimídia Fundamentos Básicos - HTML Prof. Hemir Santiago Prof. Hemir Santiago.