HTML & CSS                              The basicsTuesday, November 13, 12
purpose of this course                     You can only master web-development by doing it a lot                     This ...
end of this weekTuesday, November 13, 12
planning                     Day 1: HTML                     Day 2: CSS                     Day 3: HTML5 & CSS3           ...
today                     Overview web-development                     HTMLTuesday, November 13, 12
OVERVIEW WEB-DEVELOPMENT                                   What does it take to build a websiteTuesday, November 13, 12
In essenceTuesday, November 13, 12
In essence                           HTML   ContentTuesday, November 13, 12
In essence                           HTML   Content                            CSS   StyleTuesday, November 13, 12
In essence                           HTML     Content                            CSS     Style                           J...
In essence                           HTML     Content                            CSS     Style                           J...
Front-end & Back-end                           FrontendTuesday, November 13, 12
Front-end & Back-end                           Frontend                      BackendTuesday, November 13, 12
Front-end & Back-end                           Frontend                      Backend                                      ...
Front-end & Back-end                           Frontend                               Backend                             ...
Local & OnlineTuesday, November 13, 12
Local & Online                           Local                                            Harddrive           HTML        ...
Local & Online                           Local                                          Online server                     ...
Local & Online                           Local                                          Online server                     ...
HTML                           The content of your websiteTuesday, November 13, 12
Hyper Text Markup Language                     Not a programming language                     A markup/communication langu...
Describing content                Continuing The project continued with the project of      Continuing                prev...
Why?Tuesday, November 13, 12
Tags                     Tags describe content blocks                     Tags come in pairs : open & close               ...
Your first website                     Create ‘day1’ folder on your desktop                     Open notepad++            ...
Nesting tags                     Tags in tags                     A bold word in a paragraph                     A paragra...
Nesting tagsTuesday, November 13, 12
Writing & formatting HTML                     1. Create open & closing tag simultaneously                     2. Use inden...
Empty content tags                     Tags without content                     <br> <img> <input>                     Clo...
Tag recap                     Tags describe types of content                     Open tag and close tag                   ...
Basic HTML structure                     Doctype: which version of                     HTML                     Head: invi...
Doctype                     Indicate which version of HTML is used                     In the old days: <!DOCTYPE html PUB...
The headTuesday, November 13, 12
Tags - Headings                     h1 to h6                     Use h1 only for most importantTuesday, November 13, 12
Tags - Text                     Always nest <b>, <i>, <em> in <p>Tuesday, November 13, 12
Tags - Containers                     descriptive containers                           <header>, <section>, <footer>      ...
Tags - Lists                     Also possible to have a list in a list item                     For example a menu with s...
Exercise 1                     Copy HTML structure from extra.lessormore.nl/basics/exercise1.txt                     Past ...
Attributes                     Add extra information to tag                     In opening tag                     name=”v...
Tags - Images                     provide source in ‘src’ attribute                     provide alternative text in ‘alt’ ...
Tags - Links                     Anchor                     Provide link url in attribute ‘href’                     Provi...
Link to other HTML files                     Create 2 empty files                     ‘projectX.html’ &                   ...
Exercise 2                     Rebuild extra.lessormore.nl/basics/projectX.html for ‘projectX’ and ‘projectY’             ...
CSS                           Styling your HTMLTuesday, November 13, 12
Cascading Style Sheets                     Define how HTML looks (colors, dimensions, borders, etc)                     1 ...
SyntaxTuesday, November 13, 12
ID & CLASSTuesday, November 13, 12
Link CSS to HTML              Inline                                                                1.Browser default     ...
HTML5                           The new HTML standardTuesday, November 13, 12
New elements (tags)                     <header>                     <section>                     <footer>               ...
New inputs                     <input type=”color” />                     <input type=”date” />                     <input...
data-attribute                     <ul data-total=”12”>                      <li></li>                      <li></li>     ...
Media                     <video width="320" height="240" controls="controls">                           <source src="movi...
Canvas                     Draw with javascript                     http://net.tutsplus.com/articles/web-roundups/21-ridic...
Data storage                     localStorage                     sessionStorageTuesday, November 13, 12
CSS                           AdvancedTuesday, November 13, 12
Selecting elements                     h1, h1                  apply rules to multiple elements                     ul > l...
Pseudo classes                     :hover          a:hover{ }                     :focus          input:focus{ }          ...
CSS3                           The latest standardTuesday, November 13, 12
Prefixes                     -moz-                     -webkit-                     -o-                     -ms-Tuesday, N...
Borders                     border-radius                     box-shadowTuesday, November 13, 12
Backgrounds                     background-sizeTuesday, November 13, 12
Texts                     text-shadowTuesday, November 13, 12
@font-face                     google fontface generatorTuesday, November 13, 12
transitions                     http://www.w3schools.com/css3/css3_transitions.aspTuesday, November 13, 12
JQUERY                            Javascript LibraryTuesday, November 13, 12
Javascript                     HTML & CSS are read and displayed                     Javascript is ‘constantly’ running   ...
jQuery                     Javascript library                     Javascript made easier                     Many predefin...
Examples                     hide()/show() http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show         ...
Selecting                     As with CSS, you need to indicate which HTML element you target                     Almost e...
Do something                     $(“#intro”).hide();                     $(“#intro”).fadeIn();                     $(“#int...
Attach Listener                     $(“#intro”).click(function(){                        //whatever you want to do        ...
Alter HTML                     $(“#intro”).html(“<p>hoi</p>”);                     $(“#intro”).addClass(“changed”);Tuesday...
Alter CSS                     $(“#intro”).css(‘margin-top’, ‘100px’);Tuesday, November 13, 12
Plugins                     Fancybox http://fancybox.net/                     Image Gallery http://slidesjs.com/          ...
Upcoming SlideShare
Loading in...5
×

2012 | Html &amp; CSS by Jochem

539

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

2012 | Html &amp; CSS by Jochem

  1. 1. HTML & CSS The basicsTuesday, November 13, 12
  2. 2. purpose of this course You can only master web-development by doing it a lot This course enables you to start doing it (a lot) Learn the language Walk through the possibilities Know the (online) references for the futureTuesday, November 13, 12
  3. 3. end of this weekTuesday, November 13, 12
  4. 4. planning Day 1: HTML Day 2: CSS Day 3: HTML5 & CSS3 Day 4: jQuery Day 5: IntegratingTuesday, November 13, 12
  5. 5. today Overview web-development HTMLTuesday, November 13, 12
  6. 6. OVERVIEW WEB-DEVELOPMENT What does it take to build a websiteTuesday, November 13, 12
  7. 7. In essenceTuesday, November 13, 12
  8. 8. In essence HTML ContentTuesday, November 13, 12
  9. 9. In essence HTML Content CSS StyleTuesday, November 13, 12
  10. 10. In essence HTML Content CSS Style Java- Behavior scriptTuesday, November 13, 12
  11. 11. In essence HTML Content CSS Style Java- Behavior scriptTuesday, November 13, 12
  12. 12. Front-end & Back-end FrontendTuesday, November 13, 12
  13. 13. Front-end & Back-end Frontend BackendTuesday, November 13, 12
  14. 14. Front-end & Back-end Frontend Backend Java- HTML CSS scriptTuesday, November 13, 12
  15. 15. Front-end & Back-end Frontend Backend Java- HTML CSS script generate PHP data baseTuesday, November 13, 12
  16. 16. Local & OnlineTuesday, November 13, 12
  17. 17. Local & Online Local Harddrive HTML CSS Java- scriptTuesday, November 13, 12
  18. 18. Local & Online Local Online server Harddrive Internet HTML CSS Java- HTML CSS Java- script scriptTuesday, November 13, 12
  19. 19. Local & Online Local Online server Harddrive Internet HTML CSS Java- HTML CSS Java- script script PHP data baseTuesday, November 13, 12
  20. 20. HTML The content of your websiteTuesday, November 13, 12
  21. 21. Hyper Text Markup Language Not a programming language A markup/communication language Describes all the different types of the content “This is a Title”, “This is a Text”, “This is a Link”Tuesday, November 13, 12
  22. 22. Describing content Continuing The project continued with the project of Continuing previous semester. A start had been made in designing The project continued with the project of previous an information sharing system for the faculty. semester. A start had been made in designing an Research question within this semester, a possibility information sharing system for the faculty. to kickstart usage of the system was explored by means of qualitative research. The researched focussed on Research question finding the relation between consuming information within this semester, a possibility to kickstart usage of and generation of new question. The global the system was explored by means of qualitative hypothesis was that consuming information will research. generate new requests. For example, seeing projects in which lasercutting has resulting in nice prototypes, The research focussed on finding the relation between this might generate new requests considering the consuming information and generation of new learning of lasercutting, experts and examples.This questions. The global hypothesis was that consuming principle could then be applied on kickstarting usage information will generate new requests. For example, of the system by inserting a large amount of seeing projects in which lasercutting has resulting inTuesday, November 13, 12
  23. 23. Why?Tuesday, November 13, 12
  24. 24. Tags Tags describe content blocks Tags come in pairs : open & close open tag: <tagname> close tag: </tagname> There are 107 different tagsTuesday, November 13, 12
  25. 25. Your first website Create ‘day1’ folder on your desktop Open notepad++ Make new file Place the code on the right Save as ‘index.html’ in folder ‘day1’ Double click the ‘index.html’ fileTuesday, November 13, 12
  26. 26. Nesting tags Tags in tags A bold word in a paragraph A paragraph in an articleTuesday, November 13, 12
  27. 27. Nesting tagsTuesday, November 13, 12
  28. 28. Writing & formatting HTML 1. Create open & closing tag simultaneously 2. Use indentsTuesday, November 13, 12
  29. 29. Empty content tags Tags without content <br> <img> <input> Closing within start tag <br /> <img /> <input />Tuesday, November 13, 12
  30. 30. Tag recap Tags describe types of content Open tag and close tag <tag>..content..</tag> Self-closing tags <br /> <img />Tuesday, November 13, 12
  31. 31. Basic HTML structure Doctype: which version of HTML Head: invisible meta information Body: the actual contentTuesday, November 13, 12
  32. 32. Doctype Indicate which version of HTML is used In the old days: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1// EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Now: <!DOCTYPE html>Tuesday, November 13, 12
  33. 33. The headTuesday, November 13, 12
  34. 34. Tags - Headings h1 to h6 Use h1 only for most importantTuesday, November 13, 12
  35. 35. Tags - Text Always nest <b>, <i>, <em> in <p>Tuesday, November 13, 12
  36. 36. Tags - Containers descriptive containers <header>, <section>, <footer> non-descriptive containers <div> (block), <span> (text)Tuesday, November 13, 12
  37. 37. Tags - Lists Also possible to have a list in a list item For example a menu with submenu’sTuesday, November 13, 12
  38. 38. Exercise 1 Copy HTML structure from extra.lessormore.nl/basics/exercise1.txt Past in new notepad++ file and save as ‘exercise1.html’ in ‘day1’ folder Rebuild the website as on extra.lessormore.nl/basics/exercise1.html Test by opening file in Chrome and refresh after typing Use extra.lessormore.nl/basics/reference1.txt for help Raise your hand if finished, take a break after we checked itTuesday, November 13, 12
  39. 39. Attributes Add extra information to tag In opening tag name=”value”Tuesday, November 13, 12
  40. 40. Tags - Images provide source in ‘src’ attribute provide alternative text in ‘alt’ “relative” or “absolute” source relative example src=”images/logo.png”Tuesday, November 13, 12
  41. 41. Tags - Links Anchor Provide link url in attribute ‘href’ Provide text to click in between tags “relative” or “absolute” hrefTuesday, November 13, 12
  42. 42. Link to other HTML files Create 2 empty files ‘projectX.html’ & ‘projectY.html’ Copy paste the standard HTML structure in each file Add the menu on the right to exercise1.html (between header & section)Tuesday, November 13, 12
  43. 43. Exercise 2 Rebuild extra.lessormore.nl/basics/projectX.html for ‘projectX’ and ‘projectY’ Use for projectX image an absolute url (use online image) Use for projectY image a relative url (use downloaded image) Add ‘Read more...’ links in the projects list in ‘exercise1.html’Tuesday, November 13, 12
  44. 44. CSS Styling your HTMLTuesday, November 13, 12
  45. 45. Cascading Style Sheets Define how HTML looks (colors, dimensions, borders, etc) 1 CSS file can be used for multiple HTML filesTuesday, November 13, 12
  46. 46. SyntaxTuesday, November 13, 12
  47. 47. ID & CLASSTuesday, November 13, 12
  48. 48. Link CSS to HTML Inline 1.Browser default Internal (in <head></head>) - we don’t use this 2.External External 3.Internal 4.InlineTuesday, November 13, 12
  49. 49. HTML5 The new HTML standardTuesday, November 13, 12
  50. 50. New elements (tags) <header> <section> <footer> <article> <figure> http://www.w3schools.com/html/ <nav> html5_new_elements.aspTuesday, November 13, 12
  51. 51. New inputs <input type=”color” /> <input type=”date” /> <input type=”email” /> <input type=”number” min=”1” max=”5” /> <input type=”url” />Tuesday, November 13, 12
  52. 52. data-attribute <ul data-total=”12”> <li></li> <li></li> </ul>Tuesday, November 13, 12
  53. 53. Media <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4"> </video> <audio controls="controls"> <source src="horse.ogg" type="audio/ogg"> </audio>Tuesday, November 13, 12
  54. 54. Canvas Draw with javascript http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive- html5-canvas-experiments/Tuesday, November 13, 12
  55. 55. Data storage localStorage sessionStorageTuesday, November 13, 12
  56. 56. CSS AdvancedTuesday, November 13, 12
  57. 57. Selecting elements h1, h1 apply rules to multiple elements ul > li only select direct children input[type=email] select with corresponding attribute a:hover pseudo-classesTuesday, November 13, 12
  58. 58. Pseudo classes :hover a:hover{ } :focus input:focus{ } :blur input:blur{ } :first-child p:first-child{ } :nth-child(n) li:nth-child(2n -1)Tuesday, November 13, 12
  59. 59. CSS3 The latest standardTuesday, November 13, 12
  60. 60. Prefixes -moz- -webkit- -o- -ms-Tuesday, November 13, 12
  61. 61. Borders border-radius box-shadowTuesday, November 13, 12
  62. 62. Backgrounds background-sizeTuesday, November 13, 12
  63. 63. Texts text-shadowTuesday, November 13, 12
  64. 64. @font-face google fontface generatorTuesday, November 13, 12
  65. 65. transitions http://www.w3schools.com/css3/css3_transitions.aspTuesday, November 13, 12
  66. 66. JQUERY Javascript LibraryTuesday, November 13, 12
  67. 67. Javascript HTML & CSS are read and displayed Javascript is ‘constantly’ running Javascript can alter HTML & CSS This can be done at any moment For example after a ‘click’ or after a certain timeTuesday, November 13, 12
  68. 68. jQuery Javascript library Javascript made easier Many predefined functionsTuesday, November 13, 12
  69. 69. Examples hide()/show() http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show fadeIn()/fadeOut() http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetoggle slideUp()/slideDown() http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle Animate() http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1Tuesday, November 13, 12
  70. 70. Selecting As with CSS, you need to indicate which HTML element you target Almost exactly the same as with CSS $(“selector”) $(“div#intro”)Tuesday, November 13, 12
  71. 71. Do something $(“#intro”).hide(); $(“#intro”).fadeIn(); $(“#intro”).slideUp();Tuesday, November 13, 12
  72. 72. Attach Listener $(“#intro”).click(function(){ //whatever you want to do });Tuesday, November 13, 12
  73. 73. Alter HTML $(“#intro”).html(“<p>hoi</p>”); $(“#intro”).addClass(“changed”);Tuesday, November 13, 12
  74. 74. Alter CSS $(“#intro”).css(‘margin-top’, ‘100px’);Tuesday, November 13, 12
  75. 75. Plugins Fancybox http://fancybox.net/ Image Gallery http://slidesjs.com/ Zooming http://zoomy.me/Tuesday, November 13, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×