Learn HTML5: Getting Started

1. inarocket.com HTML Learn at rocket speed GETTING STARTED

2. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com

3. What is HTML

4. inarocket.com - HTML / Getting Started WHAT IS HTML +HTML Content structure JAVASCRIPT Content behavior CSS Content presentation +

5. inarocket.com - HTML / Getting Started WHAT IS HTML HTMLHyperText Markup Language HTML is a markup language, not a programming language

6. inarocket.com - HTML / Getting Started WHAT IS HTML HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 2014 HTML 4.0 1997 W3C Recommendations

7. inarocket.com - HTML / Getting Started WHAT IS HTML CSS3 Geolocation WOFF MathML XmlHttpRequest etc.SVG (Web Fonts) Open Web Platform

8. HTML markup

9. inarocket.com - HTML / Getting Started HTML MARKUP A markup language is used to   structure and deﬁne content semantically Soon you will learn how to use CSS to control its presentation

10. inarocket.com - HTML / Getting Started HTML MARKUP Element <h1>I’m a header</h1> ContentOpening Tag Closing Tag HTML tags are not case sensitive

11. inarocket.com - HTML / Getting Started HTML MARKUP <p>I’m a paragraph</p> HTML tags are not case sensitive ContentOpening Tag Closing Tag Element

12. DOCTYPE

13. inarocket.com - HTML / Getting Started DOCTYPE DOCTYPE Document Type Declaration Editor (what you should write) <!doctype html> <html> <head> <meta charset="utf-8"> <title>Page title</title> </head> <body> Page content… </body> </html> It tells the browser / parser what type of document is processing. Should always be the ﬁrst item of any HTML ﬁle.

14. HTML element

15. inarocket.com - HTML / Getting Started HTML ELEMENT Coming soon. Sorry for the inconvenience.

16. HTML head

17. inarocket.com - HTML / Getting Started HTML HEAD Coming soon. Sorry for the inconvenience.

18. Your ﬁrst HTML in 5 minutes

19. inarocket.com - HTML / Getting Started YOUR FIRST HTML IN 5 MINUTES +EDITOR e.g. Notepad BROWSER e.g. Firefox FOLDERS Project structure + 21 3

20. inarocket.com - HTML / Getting Started YOUR FIRST HTML IN 5 MINUTES: FOLDERS Create the folders that will contain the web project on your computer. projectname: • img • css • js projectname img car.png css js Here you can save the HTML ﬁles that you will create in this course. Important rules for naming folders and ﬁles. • Never use spaces. • Never use special characters (%, *, +, etc.). • Avoid uppercases. (for this course put an image in this folder, please)

22. inarocket.com - HTML / Getting Started YOUR FIRST HTML IN 5 MINUTES: EDITOR Editor: pre-installed You can just use any text editor preinstalled in your computer. Notepad TextEdit Gedit Editor: additional There are other editors but you won't need their advanced features for this course. Sublime Text Atom

24. inarocket.com - HTML / Getting Started YOUR FIRST HTML IN 5 MINUTES: BROWSER Browser: pre-installed You can just use any preinstalled browser in your computer. Edge Safari Firefox Browser: additional There are other browsers that you can also install in your computer. Chrome Firefox Opera

25. Document structure: basic

26. inarocket.com - HTML / Getting Started DOCUMENT STRUCTURE: BASIC body head html Use head to include information about the document (title, language, etc.). But for the title, head content is not shown to users. Use body to include all the content you want to show to your users (text, images, links, etc.).

27. inarocket.com - HTML / Getting Started DOCUMENT STRUCTURE: BASIC body head html Editor (what you should write) <!doctype html> <html> <head> <meta charset="utf-8"> <title>Page title</title> </head> <body> Page content… </body> </html>

28. Hello world!

29. inarocket.com - HTML / Getting Started HELLO WORLD!: BASIC WORKFLOW index.html EDITOR BROWSER e.g. Notepad e.g. Firefox SAVE OPEN

30. inarocket.com - HTML / Getting Started Save as index.html HELLO WORLD! <!doctype html> <html> <head> <meta charset="utf-8"> <title>Page title</title> </head> <body> Hello world! </body> </html> Editor (what you should write) Browser Hello world! (what you should view) Open index.html in your browser index.html READY TO USE CODE

31. Are you also interested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:

32. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com

33. inarocket.com HTML Learn at rocket speed GETTING STARTED

Learn HTML5: Getting Started

In a Rocket

Learn HTML5: Getting Started