Your SlideShare is downloading. ×
0
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Desenvolvimento web I - HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Desenvolvimento web I - HTML

523

Published on

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

No Downloads
Views
Total Views
523
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. “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. Í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. Recapitulando...Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 5. Solução, lembra?Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 6. Server-side x Client-side?Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 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. 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. 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. 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. Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 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. Qual ferramenta utilizar? B L O C O D E N O TA S
  • 14. Mais controle em seu códigoIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 15. E o Dreamweaver? E D ITO R W YS IW YG
  • 16. É para os fracos!Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 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. 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. Sintaxe HTML Sintaxe Endentação AninhamentoIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 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. Hello world em HTMLIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 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. Tags HTMLIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 24. Escape de caracteresIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 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. 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. 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. Estrutura de layoutO Q U E D E V E M O S ( O U N Ã O ) FA Z E R . . .
  • 29. CSSZenGardenIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 30. ErradoIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 31. CorretoIst-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 32. Lindo!Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]
  • 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

×