Hey! :-)An Introduction to the Web, HTML, CSS & Javascript
45 minutes.
Objectives• Familiarize the Web & the Browser• First-steps into HTML, CSS & Javascript• Motivate towards further exploration
HTML   CSSJavascript
HTML(HyperText Markup Language)
HTML(HyperText Markup Language)           Tags
HTML(HyperText Markup Language)           Tags      .html document  <html> <head> <body>
HTML(HyperText Markup Language)           Tags      .html document <html> <head> <body> </html> </head> </body>
Structure of an HTML      Document
Structure of an HTML      Document <html>  <head>   <!--header content here-->  </head>  <body>   <!--body content here-->...
CSSCascading Style-Sheets
CSS          Cascading Style-Sheets• Provides styling which defines how to  display the HTML elements
CSS          Cascading Style-Sheets• Provides styling which defines how to  display the HTML elements• Separates the Data c...
CSS           Cascading Style-Sheets• Provides styling which defines how to  display the HTML elements• Separates the Data ...
Tables vs CSS
Tables vs CSS• “Table” is an HTML element originally  intended to display data in the form of a  table.
Tables vs CSS• “Table” is an HTML element originally  intended to display data in the form of a  table.• HTML takes care o...
CSS SyntaxSelector      Declaration        Declaration            Property Value   Property      Value
CSS Syntax       Selector      Declaration        Declaration                   Property Value   Property      Value• Sele...
CSS Syntax       Selector      Declaration        Declaration                   Property Value   Property      Value• Sele...
CSS Syntax       Selector      Declaration        Declaration                   Property Value   Property      Value• Sele...
Inserting CSS into a Page
Inserting CSS into a Page• Internal CSS:      <head>         <style type="text/css">            p { margin-left:20px; }   ...
Inserting CSS into a Page• Internal CSS:        <head>           <style type="text/css">              p { margin-left:20px...
Inserting CSS into a Page• Internal CSS:         <head>            <style type="text/css">               p { margin-left:2...
CSS Box Model
JavaScript• It is a client-side scripting language• It is an interpreted language• It was designed to add interactivity to...
• JavaScript was influenced by Scheme & Self• It was designed by Brendan Eich of Netscape• Originally called LiveScript• JS...
What can it do?• It can read & write to HTML webpages• It can react to events• It can do mathematical calculations• It can...
Inserting JavaScript
Inserting JavaScript• Internal JavaScript:         <script type="text/javascript">            <!-- document.write(“Hello W...
Inserting JavaScript• Internal JavaScript:            <script type="text/javascript">               <!-- document.write(“H...
Further Reading• W3Schools (HTML, CSS, JavaScript)• CSS3 for Web Designers - Dan Cedarholm• SitePoint CSS Reference• Eloqu...
Thank you!
Upcoming SlideShare
Loading in …5
×

Web

458 views
423 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
458
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Web

    1. 1. Hey! :-)An Introduction to the Web, HTML, CSS & Javascript
    2. 2. 45 minutes.
    3. 3. Objectives• Familiarize the Web & the Browser• First-steps into HTML, CSS & Javascript• Motivate towards further exploration
    4. 4. HTML CSSJavascript
    5. 5. HTML(HyperText Markup Language)
    6. 6. HTML(HyperText Markup Language) Tags
    7. 7. HTML(HyperText Markup Language) Tags .html document <html> <head> <body>
    8. 8. HTML(HyperText Markup Language) Tags .html document <html> <head> <body> </html> </head> </body>
    9. 9. Structure of an HTML Document
    10. 10. Structure of an HTML Document <html> <head> <!--header content here--> </head> <body> <!--body content here--> </body> </html>
    11. 11. CSSCascading Style-Sheets
    12. 12. CSS Cascading Style-Sheets• Provides styling which defines how to display the HTML elements
    13. 13. CSS Cascading Style-Sheets• Provides styling which defines how to display the HTML elements• Separates the Data contents from the Presentation
    14. 14. CSS Cascading Style-Sheets• Provides styling which defines how to display the HTML elements• Separates the Data contents from the Presentation• External Stylesheets can save a lot of work
    15. 15. Tables vs CSS
    16. 16. Tables vs CSS• “Table” is an HTML element originally intended to display data in the form of a table.
    17. 17. Tables vs CSS• “Table” is an HTML element originally intended to display data in the form of a table.• HTML takes care of Data. Stylesheet (CSS) takes care of Design.
    18. 18. CSS SyntaxSelector Declaration Declaration Property Value Property Value
    19. 19. CSS Syntax Selector Declaration Declaration Property Value Property Value• Selectors can be tags, ids or classes.
    20. 20. CSS Syntax Selector Declaration Declaration Property Value Property Value• Selectors can be tags, ids or classes.• Enclosed in braces.
    21. 21. CSS Syntax Selector Declaration Declaration Property Value Property Value• Selectors can be tags, ids or classes.• Enclosed in braces.• Property-Value pairs which end in semicolon.
    22. 22. Inserting CSS into a Page
    23. 23. Inserting CSS into a Page• Internal CSS: <head> <style type="text/css"> p { margin-left:20px; } body { background-image:url("images/back40.gif"); } </style> </head>
    24. 24. Inserting CSS into a Page• Internal CSS: <head> <style type="text/css"> p { margin-left:20px; } body { background-image:url("images/back40.gif"); } </style> </head>• External CSS: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
    25. 25. Inserting CSS into a Page• Internal CSS: <head> <style type="text/css"> p { margin-left:20px; } body { background-image:url("images/back40.gif"); } </style> </head>• External CSS: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>• Inline CSS: <p style=" color:#FF0000; margin-left:20px ">This is a paragraph.</p>
    26. 26. CSS Box Model
    27. 27. JavaScript• It is a client-side scripting language• It is an interpreted language• It was designed to add interactivity to webpages Java != JavaScript
    28. 28. • JavaScript was influenced by Scheme & Self• It was designed by Brendan Eich of Netscape• Originally called LiveScript• JScript is Microsoft version of JavaScript• JavaScript, JScript, ECMAScript etc are all essentially the same.
    29. 29. What can it do?• It can read & write to HTML webpages• It can react to events• It can do mathematical calculations• It can be used to validate data• It can be used to create cookies
    30. 30. Inserting JavaScript
    31. 31. Inserting JavaScript• Internal JavaScript: <script type="text/javascript"> <!-- document.write(“Hello World”); --> </script>
    32. 32. Inserting JavaScript• Internal JavaScript: <script type="text/javascript"> <!-- document.write(“Hello World”); --> </script>• External JavaScript: <head> <script type=”text/javascript” src=”xxxx.js” /> </script> </head>
    33. 33. Further Reading• W3Schools (HTML, CSS, JavaScript)• CSS3 for Web Designers - Dan Cedarholm• SitePoint CSS Reference• Eloquent JavaScript - Marijn Haverbeke• Mozilla Developer Network
    34. 34. Thank you!

    ×