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
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?
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?
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!
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...
21. Code & Graphics = Best Pals Search engine optimisation (SEO) Optimisation: Download speed Bandwidth use: Your server Visitors internet quota Accessibility Much more...
22.
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...
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
