2014 - Desenvolvimento Web - 02 HTML

391 visualizações

Publicada em

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
391
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
20
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

2014 - Desenvolvimento Web - 02 HTML

  1. 1. Multimídia HTML 2014 Prof. Willian Magalhães wmagalhaes@unipar.br
  2. 2. Hypertext Markup Language
  3. 3. • 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
  4. 4. • As especificações da linguagem HTML são publicadas pelo W3C (World Wide Web Consortium) • http://www.w3.org/html/ wmagalhaes@unipar.br HTML
  5. 5. • 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
  6. 6. • 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
  7. 7. • 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
  8. 8. wmagalhaes@unipar.br Parágrafos
  9. 9. • 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
  10. 10. wmagalhaes@unipar.br Cabeçalhos
  11. 11. • 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
  12. 12. wmagalhaes@unipar.br Links
  13. 13. • 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
  14. 14. • 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
  15. 15. wmagalhaes@unipar.br Âncoras
  16. 16. • 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
  17. 17. wmagalhaes@unipar.br Imagens
  18. 18. • O conceito de tabelas foi criado para exibir dados tabulares • Geralmente utilizado em listagens e relatórios wmagalhaes@unipar.br Tabelas
  19. 19. wmagalhaes@unipar.br Tabelas
  20. 20. • 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
  21. 21. wmagalhaes@unipar.br Tabelas
  22. 22. 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
  23. 23. wmagalhaes@unipar.br Tabelas
  24. 24. 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
  25. 25. • 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
  26. 26. • Utilizada para exibir definições de termos wmagalhaes@unipar.br Lista de Definição
  27. 27. • Utilizada para exibir itens de forma ordenada wmagalhaes@unipar.br Lista Ordenada
  28. 28. • Utilizada para exibir itens sem qualquer ordem wmagalhaes@unipar.br Lista Não Ordenada
  29. 29. • 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
  30. 30. • A tag input dependendo do valor do atributo type pode assumir diversas formas • text wmagalhaes@unipar.br Formulários
  31. 31. • password • file wmagalhaes@unipar.br Formulários
  32. 32. • checkbox wmagalhaes@unipar.br Formulários
  33. 33. • radio wmagalhaes@unipar.br Formulários
  34. 34. • button • submit wmagalhaes@unipar.br Formulários
  35. 35. • reset • hidden wmagalhaes@unipar.br Formulários
  36. 36. • A tag select permite ao usuário escolher um ou mais itens de uma lista • multiple wmagalhaes@unipar.br Formulários
  37. 37. • 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
  38. 38. • A tag label é utilizada para definir um “rótulo”, um titulo para um determinado campo wmagalhaes@unipar.br Formulários
  39. 39. • 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

×