Web front end development introduction to html css and javascript
2 likes873 views
This document provides an introduction to HTML, CSS, and JavaScript for building websites. It discusses how websites work by connecting clients and servers, and compares making a website to writing a book by organizing content into pages. The document then covers the basic purposes and syntax of HTML for creating page content, CSS for styling, and JavaScript for interactivity. It provides many code examples and explains common elements, properties, and methods in each language to demonstrate basic front-end web development concepts and tools.
Web front end development introduction to html css and javascript
- 1. Web Front End Development Introduction to HTML, CSS, and Javascript Marc Huang
- 2. What is Website? How it works? Before we start…
- 4. Client Readers (Users)Server Books (Websites) Hi, I want to read this Ok, here is the content of it Hmm, I would like to start This is the first page Next page, please Ok, here you are Skip to page six Sure, no problem Go to Chapter 10 Well, you should pay some fees Alright…
- 5. Making a Website is like Writing and organising the story and chapters of a Book
- 6. Publish a Website is as well as Publish a Book
- 7. Today’s topic • Is not about • Build or publish a website • Is about • How to make a(each) page of a website • Tools we used for doing this • HTML, CSS, and Javascript
- 9. HTML Hyper Text Markup Language Ref: http://www.w3schools.com/hTml/
- 10. A small HTML document
- 11. How it looks in browsers
- 12. How to create it
- 13. Elements
- 17. Single or Double Quotes
- 18. Common Elements • <p>Paragraphs</p> • <h1>Heading1</h1> • <a href=“http://www.w3schools.com”>W3Schools</a> • <img src=“w3schools.jpg” /> • <div>Block-level</div> • <span>Inline Block</span> • <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul> • <table><tr><td>Table Cell</td></tr></table>
- 19. Block-level Elements <h1>Heading1</h1> Texts follow h1 element
- 20. <a href=“http://www.w3schools.com”>W3Schools</a> Texts follow link element Inline-level Elements
- 21. Entities
- 22. Charset
- 23. CSS Cascading Style Sheets Ref: http://www.w3schools.com/css/
- 24. Why Use CSS?
- 25. Syntax
- 26. How To • External style sheet • Internal style sheet • Inline style
- 27. Cascading Order
- 28. Box Model
- 29. Width & Height of an Element Note for old IE: Internet Explorer 8 and earlier versions, include padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.
- 30. Common Styles • Related to Box • Backgrounds, Display, Position, Float, Opacity • Related to Content • Colors, Fonts, Links, Overflow, Align • Different formats of Box • Lists, Tables, Forms, Imgs
- 31. Combinators • descendant selector (space) • div p { background-color: yellow; } • child selector (>) • div > p { background-color: yellow; } • adjacent sibling selector (+) • div + p { background-color: yellow; } • general sibling selector (~) • div ~ p {background-color: yellow; } http://www.w3schools.com/css/css_combinators.asp
- 32. Pseudo-Classes
- 34. Pseudo-Element
- 37. Javascript is nothing to do with Java! Ref: http://www.w3schools.com/js/
- 38. Javascript Can… • Change HTML Content • Change HTML Attributes • Change HTML Styles (CSS) • Hide/Show HTML Elements • and more…
- 39. Where To
- 40. Syntax
- 41. Data Type
- 42. Null & Undefined
- 43. Functions
- 44. Objects
- 45. Objects Cont.
- 46. Objects Cont.
- 47. Scope
- 48. Events
- 49. Strings • var answer = “It’s alright”; • var answer = “He is called ‘Johnny’”; • var answer = ‘He is called “Johnny”’; • var answer = “He is called ”Johnny””; • var answer = “He is called” + “Johnny”;
- 50. String Methods • var str =“This is an example of string example”; • var sln = str.length; • var pos = str.indexOf(“is”); • var lpos = str.lastIndexOf(“example”); • var spos = str.search(“is”); //accept regular expressions • var res = str.slice(“22,28”); //=“string” • var res = str.substring(“22,28”); //=“string” • var res = str.substr(“22,6”); //=“string” • var n = str.replace(“string”,”integer”); • var n = str.replace(/example/g, “sample”); // g = global match
- 51. Numbers
- 52. Dates
- 53. Arrays
- 54. Comparisons
- 55. Conditions
- 56. Switch
- 57. Loop For
- 58. Loop While
- 59. Break & Continue
- 60. Errors
- 61. JSON
- 63. One more thing…
- 64. Id and Class
- 65. Q & A
- 66. Thanks