2012 | Html & CSS by Jochem
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

2012 | Html & CSS by Jochem

  • 833 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
833
On Slideshare
833
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML & CSS The basicsTuesday, November 13, 12
  • 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. end of this weekTuesday, November 13, 12
  • 4. planning Day 1: HTML Day 2: CSS Day 3: HTML5 & CSS3 Day 4: jQuery Day 5: IntegratingTuesday, November 13, 12
  • 5. today Overview web-development HTMLTuesday, November 13, 12
  • 6. OVERVIEW WEB-DEVELOPMENT What does it take to build a websiteTuesday, November 13, 12
  • 7. In essenceTuesday, November 13, 12
  • 8. In essence HTML ContentTuesday, November 13, 12
  • 9. In essence HTML Content CSS StyleTuesday, November 13, 12
  • 10. In essence HTML Content CSS Style Java- Behavior scriptTuesday, November 13, 12
  • 11. In essence HTML Content CSS Style Java- Behavior scriptTuesday, November 13, 12
  • 12. Front-end & Back-end FrontendTuesday, November 13, 12
  • 13. Front-end & Back-end Frontend BackendTuesday, November 13, 12
  • 14. Front-end & Back-end Frontend Backend Java- HTML CSS scriptTuesday, November 13, 12
  • 15. Front-end & Back-end Frontend Backend Java- HTML CSS script generate PHP data baseTuesday, November 13, 12
  • 16. Local & OnlineTuesday, November 13, 12
  • 17. Local & Online Local Harddrive HTML CSS Java- scriptTuesday, November 13, 12
  • 18. Local & Online Local Online server Harddrive Internet HTML CSS Java- HTML CSS Java- script scriptTuesday, November 13, 12
  • 19. Local & Online Local Online server Harddrive Internet HTML CSS Java- HTML CSS Java- script script PHP data baseTuesday, November 13, 12
  • 20. HTML The content of your websiteTuesday, November 13, 12
  • 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. 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. Why?Tuesday, November 13, 12
  • 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. 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. Nesting tags Tags in tags A bold word in a paragraph A paragraph in an articleTuesday, November 13, 12
  • 27. Nesting tagsTuesday, November 13, 12
  • 28. Writing & formatting HTML 1. Create open & closing tag simultaneously 2. Use indentsTuesday, November 13, 12
  • 29. Empty content tags Tags without content <br> <img> <input> Closing within start tag <br /> <img /> <input />Tuesday, November 13, 12
  • 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. Basic HTML structure Doctype: which version of HTML Head: invisible meta information Body: the actual contentTuesday, November 13, 12
  • 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. The headTuesday, November 13, 12
  • 34. Tags - Headings h1 to h6 Use h1 only for most importantTuesday, November 13, 12
  • 35. Tags - Text Always nest <b>, <i>, <em> in <p>Tuesday, November 13, 12
  • 36. Tags - Containers descriptive containers <header>, <section>, <footer> non-descriptive containers <div> (block), <span> (text)Tuesday, November 13, 12
  • 37. Tags - Lists Also possible to have a list in a list item For example a menu with submenu’sTuesday, November 13, 12
  • 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. Attributes Add extra information to tag In opening tag name=”value”Tuesday, November 13, 12
  • 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. Tags - Links Anchor Provide link url in attribute ‘href’ Provide text to click in between tags “relative” or “absolute” hrefTuesday, November 13, 12
  • 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. 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. CSS Styling your HTMLTuesday, November 13, 12
  • 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. SyntaxTuesday, November 13, 12
  • 47. ID & CLASSTuesday, November 13, 12
  • 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. HTML5 The new HTML standardTuesday, November 13, 12
  • 50. New elements (tags) <header> <section> <footer> <article> <figure> http://www.w3schools.com/html/ <nav> html5_new_elements.aspTuesday, November 13, 12
  • 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. data-attribute <ul data-total=”12”> <li></li> <li></li> </ul>Tuesday, November 13, 12
  • 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. Canvas Draw with javascript http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive- html5-canvas-experiments/Tuesday, November 13, 12
  • 55. Data storage localStorage sessionStorageTuesday, November 13, 12
  • 56. CSS AdvancedTuesday, November 13, 12
  • 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. 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. CSS3 The latest standardTuesday, November 13, 12
  • 60. Prefixes -moz- -webkit- -o- -ms-Tuesday, November 13, 12
  • 61. Borders border-radius box-shadowTuesday, November 13, 12
  • 62. Backgrounds background-sizeTuesday, November 13, 12
  • 63. Texts text-shadowTuesday, November 13, 12
  • 64. @font-face google fontface generatorTuesday, November 13, 12
  • 65. transitions http://www.w3schools.com/css3/css3_transitions.aspTuesday, November 13, 12
  • 66. JQUERY Javascript LibraryTuesday, November 13, 12
  • 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. jQuery Javascript library Javascript made easier Many predefined functionsTuesday, November 13, 12
  • 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. 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. Do something $(“#intro”).hide(); $(“#intro”).fadeIn(); $(“#intro”).slideUp();Tuesday, November 13, 12
  • 72. Attach Listener $(“#intro”).click(function(){ //whatever you want to do });Tuesday, November 13, 12
  • 73. Alter HTML $(“#intro”).html(“<p>hoi</p>”); $(“#intro”).addClass(“changed”);Tuesday, November 13, 12
  • 74. Alter CSS $(“#intro”).css(‘margin-top’, ‘100px’);Tuesday, November 13, 12
  • 75. Plugins Fancybox http://fancybox.net/ Image Gallery http://slidesjs.com/ Zooming http://zoomy.me/Tuesday, November 13, 12