Introduction to HTML5+CSS

1,120 views

Published on

Brief introduction to HTML5+CSS for designers.

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,120
On SlideShare
0
From Embeds
0
Number of Embeds
365
Actions
Shares
0
Downloads
21
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Introduction to HTML5+CSS

  1. 1. INTRODUCTION TO HTML5 + CSS ramses.cabello@gmail.com @ramsescabello
  2. 2. why the hell do you have to learn HTML5 + CSS ?
  3. 3. why the hell do you have to learn HTML5 + CSS ? YOU ARE A DESIGNER.
  4. 4. Ok. So now... What is HTML ?
  5. 5. Ok. So now... What is HTML ?
  6. 6. Computers don’t think, but YOU DO!.
  7. 7. HTML is the language used by you to write websites and therefore help computers communicate.
  8. 8. Computers translate HTML into our language using a tool called Browser.
  9. 9. What is the structure of HTML language?
  10. 10. <head> HTML is like you.
  11. 11. Website Title Author Description <head> HTML is like you.
  12. 12. Website Title Author Description <head> The content of the web. <body> HTML is like you.
  13. 13. HTML is like you. CSS defines your style.
  14. 14. HTML is like you. CSS defines your style.
  15. 15. Just in case you missed out.
  16. 16. HTML defines the content. Hello World!
  17. 17. HTML defines the content. CSS defines the style. Hello World!
  18. 18. before we get started! 1 Get paper & pen 2 Download a great Open Source editor www.brackets.io 3 Have a lot of patience. Learning takes time. You can do it.
  19. 19. html syntax <html> Name of the function Function starts Function ends
  20. 20. html syntaxhtml syntax every beginning has an end. <html> content </html>
  21. 21. <body> <p>Hello</p> </body> html syntaxhtml syntax BE CLEAN! Indent all your code.
  22. 22. <body> <p>Hello</p> </body> html syntaxhtml syntax BE CLEAN! Indent all your code.
  23. 23. html syntax Sample tag: Paragraphs <p>Here you would write all the text from the paragraph</p>
  24. 24. html syntax Sample tag: Images <img src=”name.jpg” alt=”” />
  25. 25. html syntax Sample tag: Images <img src=”name.jpg” alt=”” /> Some HTML tags close themselves. Inside a tag you can have variables.
  26. 26. html syntax Sample tag: Links <a href=”url” alt=””> Name of the link </a>
  27. 27. html online resources www.google.com
  28. 28. html online resources http://www.w3schools.com/html/default.asp
  29. 29. html online resources http://tympanus.net/codrops/
  30. 30. let’s get started! http://bit.ly/EjemploHTMLProduccionGrafica

×