Download as KEY, PPTX
More Related Content
Similar to Wcphx 2012-workshop
![[SUTD GDSC] Intro to HTML and CSS](https://cdn.slidesharecdn.com/ss_thumbnails/introtohtml-230215093923-21d7cfc6-thumbnail.jpg?width=640&height=640&fit=bounds)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Wcphx 2012-workshop
- 1. Intro to Hacking Workshop HTML, CSS, & PHP Basics Miami Beach, FL 2012 #wpworkshop Powered by Ptah Dunbar Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 2. ? What are yougoing to learn today? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 3. Development Environment Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 4. Intro to Hacking— Tweet! @ptahdunbar #wpworkshop
- 5. CSS Introto Hacking — Tweet! @ptahdunbar #wpworkshop
- 6. Basics Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 7. Are you Ready ? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 8. Development Environment Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 9. Setting up alocal development enviroment You need: ✓ A Web Server (Apache) w/ PHP ✓ Text Editor (for plain text docs) ✓ Web Browser(s) (Latest Firefox, Chrome, Safari, Opera, IE) Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 10. Setting up alocal development enviroment For Windows: ✓ WAMP (http://wampserver.com) ✓ Notepad++ (http://notepad-plus- plus.org) Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 11. Setting up alocal development enviroment For Mac: ✓ MAMP (http://mamp.info) ✓ Text Wrangler (http://barebones.com/products/textwrangler/) ✓ TextMate (http://macromates.com/) Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 12. Download & Install ... now. Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 13. Verify that everythingworks http:// localhost/ Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 14. Setting up yourweb directory ✓ Navigate to web directory. ✓ Create a new folder called “workshop”. ✓ Within “workshop”, create a subfolder called “css”. Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 15. Setting up yourweb directory Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 16. You’re now Ready for Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 17. Intro to Hacking— Tweet! @ptahdunbar #wpworkshop
- 18. What is HTML? HyperText Markup Language Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 19. What is HTML? Elements & Tags <html></html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 20. What is HTML? Elements & Tags <img /> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 21. What is HTML? Attributes <html lang="en"></html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 22. What is HTML? Attributes <img src="image.png" /> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 23. What is HTML? Attributes <audio controls></audio> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 24. What is HTML? Comments <!-- this is a comment --> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 25. What is HTML? Comments <!-- this is a multi-line comment --> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 26. Basic HTML document— Hello World! <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> </head> <body> <p>Hello World</p> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 27. Basic HTML document— Hello World! <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> </head> <body> <p>Hello World</p> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 28. Basic HTML document— Hello World! <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> </head> <body> <p>Hello World</p> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 29. Basic HTML document— Hello World! <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> </head> <body> <p>Hello World</p> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 30. Basic HTML document— Hello World! <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> </head> <body> <p>Hello World</p> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 31. Basic HTML document— Hello World! <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> </head> <body> <p>Hello World</p> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 32. Basic HTML document— Hello World! <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> </head> <body> <p>Hello World</p> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 33. Web Standards World WideWeb WHATWG Consortium Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 34. Workshop. Followmy lead... Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 35. Save document ashello-world.html <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> </head> <body> <!-- Hello World --> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 36. Overview of (some)HTML tags • Paragraphs (p) • Headings (h1-h6) • Text Formatting (em, strong, blockquote) • Lists (ul, ol, dl) • Links (a) • Images (img) Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 37. Structuring HTML Documents Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 38. Structuring HTML Documents <article> <header> <aside> <footer> <nav> <div> <section> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 39. CSS Introto Hacking — Tweet! @ptahdunbar #wpworkshop
- 40. What is CSS? Cascading Style Sheets Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 41. What is CSS? A CSS Rule h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 42. What is CSS? Selector h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 43. What is CSS? Declaration h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 44. What is CSS? Property: value; h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 45. What is CSS? Declarations h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 46. What is CSS? Comments /* This is a comment. */ Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 47. What is CSS? Comments /* This is a multi-line comment. */ Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 48. What is CSS? Targeting page content using selectors Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 49. CSS Selectors -Targeting page content By element h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 50. CSS Selectors -Targeting page content By element h1 { color: blue; font-size: 12px; } <h1>I’m being targetted!</h1> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 51. CSS Selectors -Targeting page content By class attribute .title { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 52. CSS Selectors -Targeting page content By class attribute .title { color: blue; font-size: 12px; } <h2 class="title">I’m being targetted!</ h2> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 53. CSS Selectors -Targeting page content By ID attribute #footer { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 54. CSS Selectors -Targeting page content By ID attribute #footer { color: blue; font-size: 12px; } <div id="footer">I’m being targetted!</ div> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 55. CSS Selectors -Targeting page content Grouping Selectors #header, #footer { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 56. CSS Selectors -Targeting page content Descendant Selectors #main p { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 57. CSS Selectors -Targeting page content CSS Gotchas ➡ No whitespace or special characters ➡ CSS is case-sensitive Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 58. CSS - CascadingStyle Sheets How do browsers read CSS rules? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 59. How Browsers readselectors Browsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 60. How Browsers readselectors Browsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 61. How Browsers readselectors Browsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 62. How Browsers readselectors Browsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 63. How Browsers readselectors Browsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 64. CSS - CascadingStyle Sheets Inheritance Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 65. CSS - CascadingStyle Sheets Inheritance h1 { font-family: Arial; color: #333; } h2 { font-family: Arial; color: #333; } h3 { font-family: Arial; color: #333; } p { font-family: Arial; color: #333; } address { font-family: Arial; color: #333; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 66. CSS - CascadingStyle Sheets Inheritance body { font-family: Arial; color: #333; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 67. CSS - CascadingStyle Sheets Specificity How browsers deal with conflicting rules ID 100 Class 10 Element 1 Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 68. CSS - CascadingStyle Sheets Specificity Selector ID classes elements Total body 0 0 1 1 #footer 1 0 0 100 .intro 0 1 0 10 div p 0 0 2 2 #content p 1 0 1 101 Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 69. CSS - CascadingStyle Sheets Specificity h1 { color: black; } .title { color: blue; } #header h1 { color: yellow; } #header .title { color: green; } <div id="header"> <h1 class="title">Hello World</h1> <div> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 70. ? How do weadd CSS to HTML documents? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 71. Different Ways toembed CSS into HTML Inline Styles Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 72. Different Ways toembed CSS into HTML Inline Styles <p style="">This is blue.</p> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 73. Different Ways toembed CSS into HTML Inline Styles <p style="color: blue;">This is blue.</ p> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 74. Different Ways toembed CSS into HTML Embedded Styles <style></style> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 75. Different Ways toembed CSS into HTML Embedded Styles <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> <style> p { color: blue; } </style> </head> <body> <p>Hello World</p> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 76. Different Ways toembed CSS into HTML External Stylesheet files Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 77. Different Ways toembed CSS into HTML External Stylesheet Files p { color: blue; font-size: 12px; } Save file as css/style.css Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 78. Different Ways toembed CSS into HTML External Stylesheet Files <!DOCTYPE html> <html> <head> <title>Sample HTML Document</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <p>Hello World</p> </body> </html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 79. Basics Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 80. PHP Basics <?php ?> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 81. Questions? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
- 82. Thank you. Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 Setting up a local development enviroment, you need:\nA web server (apache)\nThe PHP interpreter\nA Text Editor that can edit plain text documents, not Word.\nAnd a web browser of your choice. I recommend Chrome, or Firefox.\nYou won&#x2019;t be needing a database in this class, however it&#x2019;s important to have when working with PHP applications like WordPress.\n
- #11 \n
- #12 \n
- #13 \n
- #14 Setting up a local development enviroment, you need:\nA web server (apache)\nThe PHP interpreter\nA Text Editor that can edit plain text documents, not Word.\nAnd a web browser of your choice. I recommend Chrome, or Firefox.\nYou won&#x2019;t be needing a database in this class, however it&#x2019;s important to have when working with PHP applications like WordPress.\n
- #15 Setting up a local development enviroment, you need:\nA web server (apache)\nThe PHP interpreter\nA Text Editor that can edit plain text documents, not Word.\nAnd a web browser of your choice. I recommend Chrome, or Firefox.\nYou won&#x2019;t be needing a database in this class, however it&#x2019;s important to have when working with PHP applications like WordPress.\n
- #16 Setting up a local development enviroment, you need:\nA web server (apache)\nThe PHP interpreter\nA Text Editor that can edit plain text documents, not Word.\nAnd a web browser of your choice. I recommend Chrome, or Firefox.\nYou won&#x2019;t be needing a database in this class, however it&#x2019;s important to have when working with PHP applications like WordPress.\n
- #17 \n
- #18 The language of the web.\nThe markup langauge for all web pages on the internet.\nEasy to learn.\n
- #19 HTML stands for Hyper Text Markup Language\nHTML is not a programming language, it is a markup language\nA markup language is a set of markup tags\nHTML uses markup tags to describe web pages\nAdds meaning to content for browsers and search engines to parse and understand.\n
- #20 HTML elements reserved HTML keywords used for the markup langauge\nHTML tags are a combination of elements and open and closing tags.\nHTML tags normally come in pairs like <b> and </b>\nStart and end tags are also called opening tags and closing tags\n\n
- #21 Here&#x2019;s an example of a self-closing HTML tag.\n\n
- #22 HTML elements can have attributes\nAttributes provide additional information about an element\nAttributes are always specified in the start tag\nAttributes come in name/value pairs like: name="value"\nAttributes can also have blank values\n\n
- #23 HTML elements can have attributes\nAttributes provide additional information about an element\nAttributes are always specified in the start tag\nAttributes come in name/value pairs like: name="value"\nAttributes can also have blank values\n
- #24 HTML elements can have attributes\nAttributes provide additional information about an element\nAttributes are always specified in the start tag\nAttributes come in name/value pairs like: name="value"\nAttributes can also have blank values\n
- #25 HTML contains comments, which are not interpreted by the browser.\nComments can span multiple lines\n
- #26 HTML contains comments, which are not interpreted by the browser.\nComments can span multiple lines\n
- #27 This is a basic HTML document.\nThis is all you need to create an HTML document\n
- #28 The HTML tag represents the root of an HTML document.\nTells the browser that everything inside those tags are to be interpreted as HTML.\n
- #29 The HEAD element contains meta data&#x2014;information that describes the document itself.\nIt&#x2019;s also where you can include resources, such as style sheets and javascript.\n\n
- #30 The TITLE element represents the document's title or name.\nIn this case, the title of this page is called &#x201C;Sample HTML Document&#x201D;.\nThis is the text that shows up in search engine results pages.\n
- #31 The body element represents the main content of the document.\nEverything that you can see in the browser window is contained inside this element.\n
- #32 The p element represents a paragraph.\nA paragraph is typically a run of phrasing content that forms a block of text with one or more sentences.\nMost readable content on a page is contained within paragraph tags.\n
- #33 A DOCTYPE is a required preamble.\nThere are two types of rendering modes for HTML documents. Quirks mode and Standards Mode.\nQuirks mode renders HTML documents accounting for legacy browsers and bugs. 9 out of 10 times, you don&#x2019;t want this.\nStandards mode tries to render an HTML document using the latest web standards specifications.\nWhen omitted, browsers will often render the document in quirks mode, which you don&#x2019;t want.\n
- #34 The W3C is an international community that develops open standards for the web.\nBoth, w3c and WHATWG are made up of members from Apple, Google, Microsoft, and Opera, amongst others.\nTogether, they develop specifications like HTML and CSS (amongst others) so that we as authors of the web can create one HTML document that works across any device/browser.\nHTML has a busy history, ranging from abandoning the standard HTML spec itself, trying to move towards a more stricter language akin to XML. Given that moving towards a more stricter HTML dubbed XHTML, which would break millions of web pages already created in standard HTML, folks from Apple, Mozilla and Opera decided to do something about it and create a group that would advance the standard HTML specification with modern improvements and APIs, all while preserving backwards compatiblity.\nThis group is called The Web Hypertext Application Technology Working Group, also known as WHATWG.\nThey pushed HTML5 which the w3c later adopted and went along with.\nAll this means is that HTML is keeping up with the pace of what we demand from the web, which is increasingly becoming faster, better, and stronger! Examples: Instant load times, complex interfaces, online gaming.\n
- #35 \n
- #36 Create this document and save it as &#x201C;hello-world.html&#x201D;\nVisit the page in a browser. (localhost/hello-world.html)\n\n
- #37 \n
- #38 \n
- #39 These are the tags used when structuring your layouts.\n\nA section is a thematic grouping of content, typically with a heading.\n\nThe article element represents a self-contained piece of content that can in principle, be distributable or reusable, e.g. feeds.\n\nExamples: forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.\n\n\n\n
- #40 \n
- #41 CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nWhereas HTML defines the structure of a document, CSS defines the look & feel of a document.\nCSS is not a programming language. Don&#x2019;t be sacred\n
- #42 A CSS rule has two main parts: a selector, and one or more declarations:\n
- #43 A CSS rule has two main parts: a selector, and one or more declarations:\n
- #44 A CSS rule has two main parts: a selector, and one or more declarations:\n
- #45 A CSS rule has two main parts: a selector, and one or more declarations:\n
- #46 Declarations consists of a property and a value.\nA CSS declaration always ends with a semicolon\nand declaration groups are surrounded by curly brackets\n
- #47 A CSS comment begins with "/*", and ends with "*/"\n
- #48 A CSS comment begins with "/*", and ends with "*/"\n
- #49 CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
- #50 Global Selectors based on HTML elements\n
- #51 \n
- #52 Attribute selectors based on class attributes applied on HTML elements\n
- #53 \n
- #54 Attribute selectors based on id attribute applied on HTML elements\n
- #55 A selector can be\n
- #56 You can group selectors by commas\n
- #57 \n
- #58 \n
- #59 CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
- #60 Global Selectors based on HTML elements\n
- #61 Global Selectors based on HTML elements\n
- #62 Global Selectors based on HTML elements\n
- #63 Global Selectors based on HTML elements\n
- #64 Global Selectors based on HTML elements\n
- #65 \n
- #66 CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
- #67 CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
- #68 ID = 100\nClass = 10\nElements = 1\nTotal is the sum\n\n
- #69 \n
- #70 CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
- #71 \n
- #72 Three ways to embedd CSS into HTML documents.\n
- #73 Three ways to embedd CSS into HTML documents.&#x201D;\n
- #74 Three ways to embedd CSS into HTML documents.&#x201D;\n
- #75 \n
- #76 Three ways to embedd CSS into HTML documents.\n
- #77 \n
- #78 Three ways to embedd CSS into HTML documents.\n
- #79 Three ways to embedd CSS into HTML documents.\n
- #80 \n
- #81 These are the tags used when structuring your layouts.\n\nA section is a thematic grouping of content, typically with a heading.\n\nThe article element represents a self-contained piece of content that can in principle, be distributable or reusable, e.g. feeds.\n\nExamples: forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.\n\n\n\n
- #82 \n
- #83 \n