HTML Introdução

Multimídia
HTML
2014
Prof. Willian Magalhães
wmagalhaes@unipar.br

• 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
HTML

• As especificações da linguagem HTML são publicadas
pelo W3C (World Wide Web Consortium)
• http://www.w3.org/html/
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)
Estrutura Básica

• Um documento HTML é composto por tags, atributos,
valores e filhos (que podem ser um simples texto ou
outros elementos)
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
Parágrafos

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
Cabeçalhos

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
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
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)
Â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
Imagens

• O conceito de tabelas foi criado para exibir dados
tabulares
• Geralmente utilizado em listagens e relatórios
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
Tabelas

Propriedades importantes
• colspan – utilizado para mesclar células em uma linha
(horizontalmente)
• rowspan – utilizados para mesclar células em uma
coluna (verticalmente)
Tabelas

Tags para organização
• thead – define o cabeçalho da tabela
• tbody – define o corpo da tabela
• tfoot – define o rodapé da tabela
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)
Listas

• Utilizada para exibir definições de termos
Lista de Definição

• Utilizada para exibir itens de forma ordenada
Lista Ordenada

• Utilizada para exibir itens sem qualquer ordem
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
Formulários

• A tag input dependendo do valor do atributo type pode
assumir diversas formas
• text
Formulários

• password
• file
Formulários

• checkbox
Formulários

• radio
Formulários

• button
• submit
Formulários

• reset
• hidden
Formulários

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

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

• A tag label é utilizada para definir um “rótulo”, um titulo
para um determinado campo
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

HTML Introdução

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à HTML Introdução

Similaire à HTML Introdução (20)

Plus de Willian Magalhães

Plus de Willian Magalhães (8)

HTML Introdução