Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Basic Web Development | WeiYuan

79 views

Published on

Basic Web Development | WeiYuan

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Basic Web Development | WeiYuan

  1. 1. Basic Web Development 2017/07/01 (Sat.) WeiYuan
  2. 2. site: v123582.github.io line: weiwei63 § 全端⼯程師 + 資料科學家 略懂⼀點網站前後端開發技術,學過資料探勘與機器 學習的⽪⽑。平時熱愛參與技術社群聚會及貢獻開源 程式的樂趣。
  3. 3. Outline § HTML (HyperText Markup Language) § CSS (Cascading Style Sheets) § JavaScript 3
  4. 4. 4
  5. 5. 5
  6. 6. A HTML with CSS and JavaScript 6
  7. 7. Try it. 7
  8. 8. Outline § HTML (HyperText Markup Language) § CSS (Cascading Style Sheets) § JavaScript 8
  9. 9. HTML 9 1 2 3 4 5 6 7 8 9 10 <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> Note: More HTML Element => https://www.w3schools.com/tags/
  10. 10. HTML 10 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <title>Page Title</title> <style> # ===== CSS code 放在這邊 ===== </style> </head> <body> <h1>Page Title</h1> <p>This is a really interesting paragraph.</p> <script> # ===== JavaScript code 放在這邊 ===== </script> </body> </html>
  11. 11. Outline § HTML (HyperText Markup Language) § CSS (Cascading Style Sheets) § JavaScript 11
  12. 12. CSS 12 1 2 3 4 5 6 7 8 9 10 11 12 13 <style> body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } </style> Note: More CSS Element => https://www.w3schools.com/cssref/
  13. 13. CSS 13 1 2 3 4 5 6 7 8 9 10 11 12 13 <style> body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } </style> Note: More CSS Element => https://www.w3schools.com/cssref/
  14. 14. CSS 14 1 2 3 4 5 6 7 8 9 10 11 12 13 <style> #id { ... } .class { ... } </style> Note: More CSS Element => https://www.w3schools.com/cssref/
  15. 15. Outline § HTML (HyperText Markup Language) § CSS (Cascading Style Sheets) § JavaScript 15
  16. 16. JavaScript 16 1 2 3 4 5 6 7 8 9 10 11 12 13 <body> <script type="text/javascript"> alert("Hello, world!"); </script> </body>
  17. 17. Thanks for listening. 2017/07/01 (Sat.) Basic Web Development Wei-Yuan Chang v123582@gmail.com v123582.github.io

×