1 Sistemas Multimídia Fundamentos Básicos - HTML Prof. Hemir Santiago Prof. 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 ‘ ’. Exemplo:  é 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: Texto marcado

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: ... corpo do documento... ... conteúdo e rótulos de tabela... 

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. =

8 Estrutura Hierárquica A estrutura básica (mínima) de uma página HTML é a seguinte: Título do documento Textos, imagens e links

9 Estrutura Hierárquica O elemento marca o início e o final do documento. Deve conter duas sub-estruturas distintas: o cabeçalho e o corpo do documento. 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 é 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 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:

13 Títulos, Parágrafos e Separadores Título do documento  Escreva o título entre e  Exemplo: Página sobre dinossauros Títulos e subtítulos de seção  Para criar um título na área de visualização utiliza-se o elemento...  Exemplo: Dinosaurs’ Web

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 e. Exemplo: Esta é a página sobre tiranossauros. Aqui... 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  Exemplo: Eu gostaria que este parágrafo tivesse três linhas. Esta seria a segunda linha e esta a terceira.

15 Títulos, Parágrafos e Separadores Separadores  O elemento 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 é utilizado para formatar um bloco de texto como citação.  Exemplo: “Os répteis são criaturas... Endereço ... 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 outras informações sobre o documento.  Exemplo: Para mais informações entre em contato com...

17 Listas Não-ordenadas  São marcadas pelos rótulos e  Cada item é contido dentro de, que não necessita de rótulo de fechamento.  Qualquer novo ou automaticamente fecham o item. Ordenadas  São marcadas pelos rótulos e  Idênticas às listas não-ordenadas

18 Listas Exemplo de lista não-ordenada: um pequeno sumário Sumário Períodos da Era Mesozóica Lista de Dinossauros Tabela Imagens Endereço para contato

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 e marcam o texto como negrito e itálico, respectivamente.  Exemplo: Triássico: de 250 a 208 milhões de anos atrás. Jurássico: de 208 a 144 milhões de anos atrás. Cretáceo: de 144 a 66 milhões de anos atrás.

20 Tabelas Os rótulos... marcam o início e o final de uma tabela.  só pode conter dois rótulos:  (Table Row) marca uma linha de tabela  marca a legenda da tabela  Cada linha pode conter uma ou mais células de dados, marcadas como (Table Data) e (Table Header).  Todas as linhas devem ter o mesmo número de células de dados.

21 Tabelas Exemplo: 1,1 1,2 1,3 2,1 2,2 2,3 3,1 3,2 3,3  Se o atributo BORDER do rótulo 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 para que recebam formatação de cabeçalho. Também incluímos uma legenda. Dinossauro Nome científico Período Tiranossauro Tyranossaurus Rex Cretáceo Velociraptor Desconhecido Cretáceo Tabela 1

23 Perguntas

24 Plano de Aulas AULADATAATIVIDADE 111/agoApresentação / Introdução 218/agoAs plataformas / Projeto 325/agoOs projetos / Exercícios 41/setDesign – Recursos de Navegação / Projeto 58/setDesign – Interfaces / Exercícios 615/setPrincípios da animação / Projeto 722/setRevisão / Exercícios 829/set Avaliação: NP1 96/out Período de avaliações - NP1 1013/outFundamentos Básicos - HTML / Correção de prova 1120/outSom / Projeto 1227/outVídeo / Exercícios 133/novProdução (autoria) / Projeto 1410/novApresentação de projetos 1517/novRevisão / Exercícios 1624/nov Período de avaliações – NP2 (a confirmar) 171/dez Período de avaliações – NP2 (a confirmar) 188/dezPeríodo de provas integradas institucionais – PII (a confirmar)