This presentation was used in week 1 of my Introduction to HTML & CSS course. It covers the following topics: 1. Overview of the course 2. Why learning coding is better for beginners than using WYSIWYG 3. What HTML & CSS is

1. Introduction to HTML & CSS Beginners

2. Overview of course

3. This course covers HTML (Hyper Text Markup Language) CSS (Cascading Style Sheets) Make websites using above And tips & tricks...

4. Websites we’ll make:

5. Outside of Class - Extras Photoshop videos Extra articles Links Write this down www.fizzylearning.com

6. A few questions Has anyone had a go at web design? Anyone used html and/or css? Anyone got a website? Any Mac Users? Everyone got a computer & internet access?

7. Why are you on the course?

8. Thoughts on web design Any thoughts on web design? Should you be able to use drag and drop/wysiwyg to create pages? Does the idea of html/css sound daunting? Do you think it will take a long time to learn?

9. paperwork

10. Admin stuff Take the register Any problems speak to me Contact me dwtutor@yorklearn.org.uk Write this down

11. Let’s get coding!

12. Easy!Easy!Easy?

13. Why hand-coding is the best place to start...

14. Boo hoo! Why do I have to learn HTML? Why can’t it be like MS Word? I can use that! Coding is difficult! I’ll never learn it! It will take me ages to learn!

15. 1. Why can’t it be like MS Word? WYSIWYG

16. Dragging & Dropping with WYSIWYG “It is quicker and easier than hand-coding!” “This is great! I don’t have to learn any code” – wrong! The reality hand code it not ‘optimised’ ‘Legacy code’ left behind Limited functionality(unless you know html) Software expensive!

17. What do you mean my£395software won’t cut the mustard? Dreamweaver is excellent for professionals WYSIWYG can create very professional looking websites but... Why not save money – thesoftware you need is called ‘notepad’ Free!!!

18. OK, why can’t it be like hotmail? Google Sites Templates look cheap Limited functionality Other solutions Create own templates...

19. It looks good, isn’t that enough?

20. Example Modify text to long word

21. Code & Graphics = Best Pals Search engine optimisation (SEO) Optimisation: Download speed Bandwidth use: Your server Visitors internet quota Accessibility Much more...

23. But... why can’t it be WYSIWYG? Computers don’t actually understand you. Dreamweaver Google Search We need to control it

24. 2& 3. “Coding is difficult... it will take me ages to learn!” We’ve already seen that it’s easier than we thought! This course will teach you enough to make your own websites... Learn by doing...

25. Summary Wysiwyg can make professional-looking websites, but there are serious drawbacks Even if you use wysiwyg – you will still need to modify the code If you want to work professionally, wysiwyg will be scoffed at More...

26. ... Without underlying knowledge... Search engines won’t index properly Pages will be slow Your bandwidth will be gobbled up You are wasting your visitors bandwidth Your website will not be fully accessible to people with disabilities – you may be breaking the law ... More...

28. Convinced?

29. Coffee Break (15 minutes)

30. Before the break: Our first webpage = easy! HTML & CSS is best Save money! Next: What html & css are Start learning html

31. About xhtml & css HTML used to incorporate the styling in to the page This makes pages bigger Obvious answer is to keep the content & styling separate Share throughout site XHTML & CSS were developed

32. XHTML XHTML is a flavour of HTML XHTML is: Always lowercase Always close tags Different names for some tags This is just the content (no styling) Imagine a webpage without styling – this is the content

33. CSS This is the styling One file e.g. Style.css Shared throughout site – not repeated When done correctly CSS has more functionality (e.g. Rollovers) Easy to update an entire website

34. Old way Style HTML Style HTML Style HTML Style HTML Style HTML Style HTML Style HTML Style HTML Style HTML Style HTML

35. Overview Style HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML

36. Summary HTML is the content without styling CSS is the styling All pages share the CSS file

37. Html exercises

38. Html exercise 1 Create a new html document Introduction to html tags

40. Html exercise 4 Creating hyperlinks Download exercise files

41. Html exercise 5 Inserting images Creating image links

42. Well done!

43. Html homework Practice what we’ve learnt Create a working basic website

44. HTML Complete. (well done!)