Introduction to HTML & CSS<br />Beginners<br />
Overview of course<br />
This course covers<br />HTML (Hyper Text Markup Language)<br />CSS (Cascading Style Sheets)<br />Make websites using above...
Websites we’ll make:<br />
Outside of Class  - Extras<br />Photoshop videos<br />Extra articles<br />Links<br />Write this down<br />www.fizzylearnin...
A few questions<br />Has anyone had a go at web design?<br />Anyone used html and/or css?<br />Anyone got a website?<br />...
Why are you on the course?<br />
Thoughts on web design<br />Any thoughts on web design?<br />Should you be able to use drag and drop/wysiwyg to create pag...
paperwork<br />
Admin stuff<br />Take the register<br />Any problems speak to me<br />Contact me dwtutor@yorklearn.org.uk<br />Write this ...
Let’s get coding!<br />
Easy!Easy!Easy?<br />
Why hand-coding is the best place to start...<br />
Boo hoo! Why do I have to learn HTML?<br />Why can’t it be like MS Word? I can use that!<br />Coding is difficult! I’ll ne...
1. Why can’t it be like MS Word?<br />WYSIWYG<br />
Dragging & Dropping with WYSIWYG<br />“It is quicker and easier than hand-coding!”<br />“This is great! I don’t have to le...
What do you mean my£395software won’t cut the mustard?<br />Dreamweaver is excellent for professionals<br />WYSIWYG can cr...
OK, why can’t it be like hotmail?<br />Google Sites<br />Templates look cheap<br />Limited functionality<br />Other soluti...
It looks good, isn’t that enough?<br />
Example<br />Modify text to long word<br />
Code & Graphics = Best Pals<br />Search engine optimisation (SEO)<br />Optimisation:<br />Download speed<br />Bandwidth us...
But... why can’t it be WYSIWYG?<br />Computers don’t actually understand you.<br />Dreamweaver<br />Google Search<br />We ...
2& 3. “Coding is difficult... it will take me ages to learn!”<br />We’ve already seen that it’s easier than we thought!<br...
Summary<br />Wysiwyg can make professional-looking websites, but there are serious drawbacks<br />Even if you use wysiwyg ...
... Without underlying knowledge...<br />Search engines won’t index properly<br />Pages will be slow<br />Your bandwidth w...
Convinced?<br />
Coffee Break (15 minutes)<br />
Before the break:<br />Our first webpage = easy!<br />HTML & CSS is best<br />Save money!<br />Next:<br />What html & css ...
About xhtml & css<br />HTML used to incorporate the styling in to the page<br />This makes pages bigger<br />Obvious answe...
XHTML<br />XHTML is a flavour of HTML<br />XHTML is:<br />Always lowercase<br />Always close tags<br />Different names for...
CSS<br />This is the styling<br />One file e.g. Style.css<br />Shared throughout site – not repeated<br />When done correc...
Old way<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Styl...
Overview<br />Style<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />
Summary<br />HTML is the content without styling<br />CSS is the styling <br />All pages share the CSS file<br />
Html exercises<br />
Html exercise 1<br />Create a new html document<br />Introduction to html tags<br />
Html exercise 2<br />Adding headings<br />The correct structure of headings<br />Paragraphs<br /><ul><li>The F5 key</li></...
Html exercise 4<br />Creating hyperlinks<br />Download exercise files<br />
Html exercise 5<br />Inserting images<br />Creating image links<br />
Well done!<br />
Html homework<br />Practice what we’ve learnt<br />Create a working basic website<br />
HTML Complete.<br />(well done!)<br />
Week 1
Upcoming SlideShare
Loading in...5
×

Week 1

443

Published on

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

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide
  • This course is an introduction.It will give you a basis to learn more.Actually ‘xhtml’ – a flavour of html
  • Html, head, title, body, h1, pSave to desktopWhen you double click on word doc what happens? When you double click html– what will happen?
  • Easier than you thought?Of course, there is more to it.
  • Who’s gotDreameweaver? Used it? Created websites with it?Optimised ... Anyone remember dial up?
  • DW is a glorified version of Notepad.
  • It can.However, these usually look cheap.Limited function – you see something good on another website – you may not be able to do it on your own.
  • Resize text, modify text to longer word
  • Google has responsibility to provide good (relevant) search results.
  • Faberge egg – craftsmanship, desireable, pride, around for a long time...
  • There are some photoshop videos to get you started on graphics.
  • Your client might by law have to reach a certain standard of accessibility.
  • Styling shared on each page of your websiteImagine
  • Sounds nasty. It’s just HTML.
  • Show some websites without CSS
  • Week 1

    1. 1. Introduction to HTML & CSS<br />Beginners<br />
    2. 2. Overview of course<br />
    3. 3. This course covers<br />HTML (Hyper Text Markup Language)<br />CSS (Cascading Style Sheets)<br />Make websites using above<br />And tips & tricks...<br />
    4. 4. Websites we’ll make:<br />
    5. 5. Outside of Class - Extras<br />Photoshop videos<br />Extra articles<br />Links<br />Write this down<br />www.fizzylearning.com<br />
    6. 6. A few questions<br />Has anyone had a go at web design?<br />Anyone used html and/or css?<br />Anyone got a website?<br />Any Mac Users?<br />Everyone got a computer & internet access?<br />
    7. 7. Why are you on the course?<br />
    8. 8. Thoughts on web design<br />Any thoughts on web design?<br />Should you be able to use drag and drop/wysiwyg to create pages?<br />Does the idea of html/css sound daunting?<br />Do you think it will take a long time to learn?<br />
    9. 9. paperwork<br />
    10. 10. Admin stuff<br />Take the register<br />Any problems speak to me<br />Contact me dwtutor@yorklearn.org.uk<br />Write this down<br />
    11. 11. Let’s get coding!<br />
    12. 12. Easy!Easy!Easy?<br />
    13. 13. Why hand-coding is the best place to start...<br />
    14. 14. Boo hoo! Why do I have to learn HTML?<br />Why can’t it be like MS Word? I can use that!<br />Coding is difficult! I’ll never learn it!<br />It will take me ages to learn!<br />
    15. 15. 1. Why can’t it be like MS Word?<br />WYSIWYG<br />
    16. 16. Dragging & Dropping with WYSIWYG<br />“It is quicker and easier than hand-coding!”<br />“This is great! I don’t have to learn any code” – wrong!<br />The reality<br />hand code it<br />not ‘optimised’<br />‘Legacy code’ left behind<br />Limited functionality(unless you know html)<br />Software expensive!<br />
    17. 17. What do you mean my£395software won’t cut the mustard?<br />Dreamweaver is excellent for professionals<br />WYSIWYG can create very professional looking websites but...<br />Why not save money – thesoftware you need is called ‘notepad’<br />Free!!!<br />
    18. 18. OK, why can’t it be like hotmail?<br />Google Sites<br />Templates look cheap<br />Limited functionality<br />Other solutions<br />Create own templates...<br />
    19. 19. It looks good, isn’t that enough?<br />
    20. 20. Example<br />Modify text to long word<br />
    21. 21. Code & Graphics = Best Pals<br />Search engine optimisation (SEO)<br />Optimisation:<br />Download speed<br />Bandwidth use:<br />Your server<br />Visitors internet quota<br />Accessibility<br />Much more...<br />
    22. 22.
    23. 23. But... why can’t it be WYSIWYG?<br />Computers don’t actually understand you.<br />Dreamweaver<br />Google Search<br />We need to control it<br />
    24. 24. 2& 3. “Coding is difficult... it will take me ages to learn!”<br />We’ve already seen that it’s easier than we thought!<br />This course will teach you enough to make your own websites...<br />Learn by doing...<br />
    25. 25. Summary<br />Wysiwyg can make professional-looking websites, but there are serious drawbacks<br />Even if you use wysiwyg – you will still need to modify the code<br />If you want to work professionally, wysiwyg will be scoffed at<br />More...<br />
    26. 26. ... Without underlying knowledge...<br />Search engines won’t index properly<br />Pages will be slow<br />Your bandwidth will be gobbled up<br />You are wasting your visitors bandwidth<br />Your website will not be fully accessible to people with disabilities – you may be breaking the law<br />... More...<br />
    27. 27.
    28. 28. Convinced?<br />
    29. 29. Coffee Break (15 minutes)<br />
    30. 30. Before the break:<br />Our first webpage = easy!<br />HTML & CSS is best<br />Save money!<br />Next:<br />What html & css are<br />Start learning html<br />
    31. 31. About xhtml & css<br />HTML used to incorporate the styling in to the page<br />This makes pages bigger<br />Obvious answer is to keep the content & styling separate<br />Share throughout site<br />XHTML & CSS were developed<br />
    32. 32. XHTML<br />XHTML is a flavour of HTML<br />XHTML is:<br />Always lowercase<br />Always close tags<br />Different names for some tags<br />This is just the content (no styling)<br />Imagine a webpage without styling – this is the content<br />
    33. 33. CSS<br />This is the styling<br />One file e.g. Style.css<br />Shared throughout site – not repeated<br />When done correctly<br />CSS has more functionality (e.g. Rollovers)<br />Easy to update an entire website<br />
    34. 34. Old way<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />Style<br />HTML<br />
    35. 35. Overview<br />Style<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />HTML<br />
    36. 36. Summary<br />HTML is the content without styling<br />CSS is the styling <br />All pages share the CSS file<br />
    37. 37. Html exercises<br />
    38. 38. Html exercise 1<br />Create a new html document<br />Introduction to html tags<br />
    39. 39. Html exercise 2<br />Adding headings<br />The correct structure of headings<br />Paragraphs<br /><ul><li>The F5 key</li></li></ul><li>Html exercise 3<br />Cheat sheet<br />Have a go/experiment<br />
    40. 40. Html exercise 4<br />Creating hyperlinks<br />Download exercise files<br />
    41. 41. Html exercise 5<br />Inserting images<br />Creating image links<br />
    42. 42. Well done!<br />
    43. 43. Html homework<br />Practice what we’ve learnt<br />Create a working basic website<br />
    44. 44. HTML Complete.<br />(well done!)<br />

    ×