MultimídiaHTML

2014

Prof. Willian Magalhãeswmagalhaes@unipar.br

Hypertext Markup Language

• Originalmente proposta por Tim Berners-Lee no final da década de 1980

• Com o objetivo de ser um mecanismo onde qualquer pessoa pudesse disseminar documentos científicos

wmagalhaes@unipar.br

HTML

• As especificações da linguagem HTML são publicadas pelo W3C (World Wide Web Consortium)

• http://www.w3.org/html/

wmagalhaes@unipar.br

HTML

• HTML - Linguagem de Marcação de HiperTexto

• Documento de texto contendo tags de marcação que informam ao browser como o documento deve ser exibido (renderizado)

wmagalhaes@unipar.br

Estrutura Básica

• Um documento HTML é composto por tags, atributos, valores e filhos (que podem ser um simples texto ou outros elementos)

wmagalhaes@unipar.br

Estrutura Básica

• Os parágrafos dentro de um documento HTML, são definidos através do elemento p

• Um elemento p ocupa todo o espaço horizontal definido pelo elemento pai

• Caso seja necessário utilizar uma quebra de linha, podemos utilizar o elemento br

wmagalhaes@unipar.br

Parágrafos

wmagalhaes@unipar.br

Parágrafos

• Dentro do HTML é possível definir títulos de uma maneira hierárquica

• Para definirmos esta hierarquia utilizamos as tags de cabeçalho h1, h2, h3, h4, h5 e h6

wmagalhaes@unipar.br

Cabeçalhos

wmagalhaes@unipar.br

Cabeçalhos

• Com os links é possível que o usuário possa navegar entre documentos diferentes

• Estes links podem ligar uma página com outra (link interno) ou para uma página em outro site (link externo)

• A tag responsável por criar links é a tag a, juntamente com o atributo href

wmagalhaes@unipar.br

Links

wmagalhaes@unipar.br

Links

• O atributo target informa onde o documento será aberto

_blank – nova janela ou aba

_self – mesma janela ou frame relativo ao link

_parent – frame pai relativo ao link

_top – mesma janela do documento do link

wmagalhaes@unipar.br

Links

• São links que apontam para seções dentro da mesma página

• Para utilizarmos o conceito de âncoras é necessário utilizarmos o atributo name no link e o caractere # no destino (âncora)

wmagalhaes@unipar.br

Âncoras

wmagalhaes@unipar.br

Âncoras

• A tag img permite a inserção de imagens dentro páginas HTML

• A tag img possui o atributo src onde é definido o caminho até a imagem

• O atributo alt pode ser utilizado para exibir um texto alternativo caso a imagem não consiga ser carregada

wmagalhaes@unipar.br

Imagens

wmagalhaes@unipar.br

Imagens

• O conceito de tabelas foi criado para exibir dados tabulares

• Geralmente utilizado em listagens e relatórios

wmagalhaes@unipar.br

Tabelas

wmagalhaes@unipar.br

Tabelas

• table – define os limites da tabela

• tr – define uma linha da tabela

• th – define uma célula de cabeçalho

• td – define uma célula

wmagalhaes@unipar.br

Tabelas

wmagalhaes@unipar.br

Tabelas

Propriedades importantes

• colspan – utilizado para mesclar células em uma linha (horizontalmente)

• rowspan – utilizados para mesclar células em uma coluna (verticalmente)

wmagalhaes@unipar.br

Tabelas

wmagalhaes@unipar.br

Tabelas

Tags para organização

• thead – define o cabeçalho da tabela

• tbody – define o corpo da tabela

• tfoot – define o rodapé da tabela

wmagalhaes@unipar.br

Tabelas

• Em um documento HTML é possível utilizar três tipos de listas, devendo ser utilizada de acordo com seu valor semântico semântica

• Lista de definição

• Lista ordenada

• Lista sem ordem (não ordenada)

wmagalhaes@unipar.br

Listas

• Utilizada para exibir definições de termos

wmagalhaes@unipar.br

Lista de Definição

• Utilizada para exibir itens de forma ordenada

wmagalhaes@unipar.br

Lista Ordenada

• Utilizada para exibir itens sem qualquer ordem

wmagalhaes@unipar.br

Lista Não Ordenada

• Através dos formulários os usuários podem interagir com as páginas web, podem enviar informações

• A tag form define a área do formulário

• O atributo action define o destino das informações do formulário

wmagalhaes@unipar.br

Formulários

• A tag input dependendo do valor do atributo type pode assumir diversas formas

• text

wmagalhaes@unipar.br

Formulários

• password

• file

wmagalhaes@unipar.br

Formulários

• checkbox

wmagalhaes@unipar.br

Formulários

• radio

wmagalhaes@unipar.br

Formulários

• button

• submit

wmagalhaes@unipar.br

Formulários

• reset

• hidden

wmagalhaes@unipar.br

Formulários

• A tag select permite ao usuário escolher um ou mais itens de uma lista

• multiple

wmagalhaes@unipar.br

Formulários

• A tag textarea exibe uma caixa de texto na qual o usuário pode inserir um texto, inclusive com quebras de linha

wmagalhaes@unipar.br

Formulários

• A tag label é utilizada para definir um “rótulo”, um titulo para um determinado campo

wmagalhaes@unipar.br

Formulários

• SILVA, Maurício Samy. HTML 5. 1ª ed. São Paulo: Novatec Editora, 2011.

• Apostila K19. Disponível em: <http://www.k19.com.br/downloads/apostilas/> Acesso em abril de 2013

• W3Schools. Disponível em: <http://www.w3schools.com/> Acesso em abril de 2014

Referências