Web
0 likes251 views
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.
Web
- 1. Hey! :-) An Introduction to the Web, HTML, CSS & Javascript
- 2. 45 minutes.
- 3. Objectives • Familiarize the Web & the Browser • First-steps into HTML, CSS & Javascript • Motivate towards further exploration
- 4. HTML CSS Javascript
- 6. HTML (HyperText Markup Language) Tags
- 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
- 15. Tables vs CSS
- 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.
- 22. Inserting CSS into a Page
- 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>
- 26. CSS Box Model
- 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
- 34. Thank you!