Desenvolvimento web I                      (X)HTML          CURSO DE EXTENSÃO 2012                 IST-PETRÓPOLIS L U I Z ...
“If not now, when? If not you, who?”        BY WA S P T EA M     FONTE: LIVRO HTML5 E CSS3      COM FARINHA E PIMENTA
Índice    Introdução ao HTML    Sintaxe do HTML    Diferença entre o HTML e o XHTML    Qual ferramenta utilizar?    E...
Recapitulando...Ist-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
Solução, lembra?Ist-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
Server-side x Client-side?Ist-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
O que é HTML?HYPERTEXT MARKUP LANGUAGE IS THE MAIN MARKUP L A N G U A G E F O R D I S P L AY I N G W E B PA G E S A N D O ...
Introdução ao HTML Foi criado na década de 80 por Tim Berners Lee Incompatibilidade entre browsers Estrutura Conteúdo ...
Diferença HTML e XHTML HTML   Padrão SGML   Fechamento das tags não é obrigatória XHTML   Padrão XML   Sintaxe contr...
Nem tudo são flores... O problema do HTML   Limitação de elementos          Tags predefinidas      Pouca semântica    ...
Ist-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
WebstantardN Ã O FA Ç A S E U P R O J E T O D E Q U A L Q U E R M A N E I R A                      FA Ç A D I R E I T O ! ...
Qual ferramenta utilizar?        B L O C O D E N O TA S
Mais controle em seu códigoIst-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
E o Dreamweaver?    E D ITO R W YS IW YG
É para os fracos!Ist-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
Estrutura básica do HTML   D O C T Y P E , C H A R S E T, TA G S B Á S I C A S
Client-side Os 3 pilares do client-side   URI - Uniform Resource Identifier   HTTP - Hyper Text Transfer Protocol   HT...
Sintaxe HTML Sintaxe Endentação AninhamentoIst-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.c...
DOCTYPE The <!DOCTYPE> declaration is not an HTML tag; It is an instruction to the web browser about what   version of H...
Hello world em HTMLIst-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
Referencias para seguir... Referencias   http://www.htmldog.com/reference/htmltags/   http://www.w3schools.com/html/  ...
Tags HTMLIst-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
Escape de caracteresIst-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
Tags, tags e mais tags h1, h2, h3, h4, h5, h6 div, span, p br, hr strong, b, i, u, s, tt, sub, sup, big, small, em bl...
Tags, tags e mais tags meta, script, noscript, style, link object, param, map , areaIst-Petrópolis - RJ [ Desenvolviment...
Tags, tags e mais tags form fieldset legend label input (button, submit, clear) Input (text, password, checkbox, rad...
Estrutura de layoutO Q U E D E V E M O S ( O U N Ã O ) FA Z E R . . .
CSSZenGardenIst-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
ErradoIst-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
CorretoIst-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
Lindo!Ist-Petrópolis - RJ [ Desenvolvimento web ]   Luiz Paulo [ lppjunior@gmail.com ]
Dúvidas?                               L U I Z PA U L O                        L P PJ U N I O R . C O M           L P PJ U...
Upcoming SlideShare
Loading in …5
×

Desenvolvimento web I - HTML

739 views

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
739
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
21
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Desenvolvimento web I - HTML

  1. 1. Desenvolvimento web I (X)HTML CURSO DE EXTENSÃO 2012 IST-PETRÓPOLIS L U I Z PA U L O - L P PJ U N I O R @ G M A I L . C O M
  2. 2. “If not now, when? If not you, who?” BY WA S P T EA M FONTE: LIVRO HTML5 E CSS3 COM FARINHA E PIMENTA
  3. 3. Índice  Introdução ao HTML  Sintaxe do HTML  Diferença entre o HTML e o XHTML  Qual ferramenta utilizar?  Estrutura básica do HTML  Doctype  Primeiro código  Tags, tags e mais tagsIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  4. 4. Recapitulando...Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  5. 5. Solução, lembra?Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  6. 6. Server-side x Client-side?Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  7. 7. O que é HTML?HYPERTEXT MARKUP LANGUAGE IS THE MAIN MARKUP L A N G U A G E F O R D I S P L AY I N G W E B PA G E S A N D O T H E R I N F O R M AT I O N T H AT C A N B E D I S P L AY E D I N A W E B BROWSER.
  8. 8. Introdução ao HTML Foi criado na década de 80 por Tim Berners Lee Incompatibilidade entre browsers Estrutura Conteúdo É uma linguagem de MARCAÇÃOIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  9. 9. Diferença HTML e XHTML HTML  Padrão SGML  Fechamento das tags não é obrigatória XHTML  Padrão XML  Sintaxe controlada  Minúsculo na escrita de tags e atributos  Mais rápida na interpretaçãoMais detalhes:http://aindaapensar.blogspot.com.br/2007/01/diferenas-html-vs-xhtml.htmlIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  10. 10. Nem tudo são flores... O problema do HTML  Limitação de elementos  Tags predefinidas  Pouca semântica  Falta de qualificação de indexação  Compreensão da informação  Muitas tags caíram em desuso  markee, dir, s, etc Solução proposta  Web semântica ou Web3.0 para o futuro  E para agora temos...Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  11. 11. Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  12. 12. WebstantardN Ã O FA Ç A S E U P R O J E T O D E Q U A L Q U E R M A N E I R A FA Ç A D I R E I T O ! U T I L I Z E PA D R Õ E S !
  13. 13. Qual ferramenta utilizar? B L O C O D E N O TA S
  14. 14. Mais controle em seu códigoIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  15. 15. E o Dreamweaver? E D ITO R W YS IW YG
  16. 16. É para os fracos!Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  17. 17. Estrutura básica do HTML D O C T Y P E , C H A R S E T, TA G S B Á S I C A S
  18. 18. Client-side Os 3 pilares do client-side  URI - Uniform Resource Identifier  HTTP - Hyper Text Transfer Protocol  HTML – Hyper Text Markup Language As 3 camadas do client-side  Informação  Formatação  ComportamentoIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  19. 19. Sintaxe HTML Sintaxe Endentação AninhamentoIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  20. 20. DOCTYPE The <!DOCTYPE> declaration is not an HTML tag; It is an instruction to the web browser about what version of HTML the page is written in;Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  21. 21. Hello world em HTMLIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  22. 22. Referencias para seguir... Referencias  http://www.htmldog.com/reference/htmltags/  http://www.w3schools.com/html/  http://www.w3schools.com/tags/default.asp  http://www.html.net/tutorials/html/  http://www.w3.org/MarkUp/  http://htmldog.com/guides/htmlbeginner/  http://cassiaferreiraj.files.wordpress.com/2012/08/html5-e-css3- com-farinha-e-pimenta-diego-eis-e-elcio-ferreira.pdf Validação  http://validator.w3.org/  http://www.dasilva.org.br/Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  23. 23. Tags HTMLIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  24. 24. Escape de caracteresIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  25. 25. Tags, tags e mais tags h1, h2, h3, h4, h5, h6 div, span, p br, hr strong, b, i, u, s, tt, sub, sup, big, small, em blockquote, cite, address, acronym, abbr ul, ol, li dl, dd, dt table, tr, th, td, thead, tbody, tfoot a, img pre, codeIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  26. 26. Tags, tags e mais tags meta, script, noscript, style, link object, param, map , areaIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  27. 27. Tags, tags e mais tags form fieldset legend label input (button, submit, clear) Input (text, password, checkbox, radio) select, option, optiongroup TextareaIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  28. 28. Estrutura de layoutO Q U E D E V E M O S ( O U N Ã O ) FA Z E R . . .
  29. 29. CSSZenGardenIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  30. 30. ErradoIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  31. 31. CorretoIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  32. 32. Lindo!Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  33. 33. Dúvidas? L U I Z PA U L O L P PJ U N I O R . C O M L P PJ U N I O R @ G M A I L . C O M

×