Front-End (HTML)

432 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
432
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Front-End (HTML)

  1. 1. sábado, 23 de março de 13
  2. 2. Desenvolvimento Front-Endsábado, 23 de março de 13
  3. 3. • HTML • Semântica • SEO • CSS • JavaScript • Bibliotecas e Frameworkssábado, 23 de março de 13
  4. 4. Tabelas vs Tablelesssábado, 23 de março de 13
  5. 5. HTMLsábado, 23 de março de 13
  6. 6. HyperText Markup Language HTML não é linguagem de programaçãosábado, 23 de março de 13
  7. 7. Tags <tag atributo="valor"></tag> <tag atributo="valor">sábado, 23 de março de 13
  8. 8. Estrutura básica de um documentosábado, 23 de março de 13
  9. 9. <!doctype> a tag ```<!doctype>``` define o tipo de html que estamos escrevendo, no caso do exemplo acima HTML5, fazendo o browser compreender corretamente os elementos presentes no documento.sábado, 23 de março de 13
  10. 10. Outros exemplos de Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">sábado, 23 de março de 13
  11. 11. Elementos para marcação de texto • <h1></h1>, .., <h6></h6> • <span></span> • <p></p> • <b></b> • <i></i> • <strong></strong> • <em></em>sábado, 23 de março de 13
  12. 12. Elementos para marcação de imagens <img src="imagem.jpg" alt="Descrição alternativa">sábado, 23 de março de 13
  13. 13. Elementos estruturais • Lista não ordenada • Lista ordenada • Lista de definição • <div></div>sábado, 23 de março de 13
  14. 14. Elementos de formulário • action : define o endereço para onde os dados serão enviados • method : define o método de envio dos dados através do protocoo HTTP que pode ser POST ou GET • enctype : esse atributo deve ser utilizado em formulários que enviem arquivos com o valor de multipart/form- datasábado, 23 de março de 13
  15. 15. <label></label>sábado, 23 de março de 13
  16. 16. <input type=”x”> • text • hidden • password • submit • radio • reset • checkbox • button • filesábado, 23 de março de 13
  17. 17. selectsábado, 23 de março de 13
  18. 18. Outros • <textarea></textarea> • <button></button>sábado, 23 de março de 13
  19. 19. Atributos comuns nos elementos de formulário • value: define um valor padrão para o campo (exceto em textareas). • disabled: desativa um campo (exceto `<input type="hidden">`, os dados desse campo não serão enviados com o formulário. • readonly: o valor do campo não pode ser editado, mas os dados são enviados com o formulário. • checked : valido para elemenetos `radio` e `checkbox`, definem o campo como selecionado por padrão.sábado, 23 de março de 13
  20. 20. Hyperlinkssábado, 23 de março de 13
  21. 21. IFramesábado, 23 de março de 13

×