1 sistemas multimídia fundamentos básicos - html prof. hemir santiago prof. hemir santiago
TRANSCRIPT
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
Representação dos Elementos
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
Representação dos Elementos
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
Representação dos Elementos
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
Representação dos Elementos
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
Estrutura Hierárquica
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
Estrutura Hierárquica
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
Estrutura Hierárquica
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
Títulos, Parágrafos e Separadores
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
Títulos, Parágrafos e Separadores
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)