Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Web

•Download as KEY, PDF•
•
Sreejith Ramakrishnan
Sreejith Ramakrishnan

This document provides an introduction to HTML, CSS, and JavaScript. It discusses the objectives of familiarizing the reader with the web browser, providing first steps into these languages, and motivating further exploration. It then covers HTML tags and document structure, how CSS is used to style and separate design from content, and how JavaScript can be used to add interactivity to webpages. It also discusses how to insert CSS and JavaScript into an HTML page through internal, external and inline methods.

Related slideshows

Css
CssCss
Css
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
 
1 of 34
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 CSS Javascript
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--> </body> </html>
CSS Cascading 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 contents from the Presentation
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
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 of Data. Stylesheet (CSS) takes care of Design.
CSS Syntax Selector Declaration Declaration Property Value Property Value
CSS Syntax Selector Declaration Declaration Property Value Property Value • Selectors can be tags, ids or classes.
CSS Syntax Selector Declaration Declaration Property Value Property Value • Selectors can be tags, ids or classes. • Enclosed in braces.
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.
Inserting CSS into a Page
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>
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>
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>
CSS Box Model
JavaScript • It is a client-side scripting language • It is an interpreted language • It was designed to add interactivity to webpages Java != JavaScript
• 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.
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
Inserting JavaScript
Inserting JavaScript • Internal JavaScript: <script type="text/javascript"> <!-- document.write(“Hello World”); --> </script>
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>
Further Reading • W3Schools (HTML, CSS, JavaScript) • CSS3 for Web Designers - Dan Cedarholm • SitePoint CSS Reference • Eloquent JavaScript - Marijn Haverbeke • Mozilla Developer Network
Thank you!

More Related Content

Web

  • 1. Hey! :-) An Introduction to the Web, HTML, CSS & Javascript
  • 3. Objectives • Familiarize the Web & the Browser • First-steps into HTML, CSS & Javascript • Motivate towards further exploration
  • 4. HTML CSS Javascript
  • 7. HTML (HyperText Markup Language) Tags .html document <html> <head> <body>
  • 8. HTML (HyperText Markup Language) Tags .html document <html> <head> <body> </html> </head> </body>
  • 9. Structure of an HTML Document
  • 10. Structure of an HTML Document <html> <head> <!--header content here--> </head> <body> <!--body content here--> </body> </html>
  • 12. CSS Cascading Style-Sheets • Provides styling which defines how to display the HTML elements
  • 13. CSS Cascading Style-Sheets • Provides styling which defines how to display the HTML elements • Separates the Data contents from the Presentation
  • 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
  • 16. Tables vs CSS • “Table” is an HTML element originally intended to display data in the form of a table.
  • 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. CSS Syntax Selector Declaration Declaration Property Value Property Value
  • 19. CSS Syntax Selector Declaration Declaration Property Value Property Value • Selectors can be tags, ids or classes.
  • 20. CSS Syntax Selector Declaration Declaration Property Value Property Value • Selectors can be tags, ids or classes. • Enclosed in braces.
  • 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.
  • 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. 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. 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>
  • 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. • 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. 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
  • 31. Inserting JavaScript • Internal JavaScript: <script type="text/javascript"> <!-- document.write(“Hello World”); --> </script>
  • 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. Further Reading • W3Schools (HTML, CSS, JavaScript) • CSS3 for Web Designers - Dan Cedarholm • SitePoint CSS Reference • Eloquent JavaScript - Marijn Haverbeke • Mozilla Developer Network

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n