Intro to Hacking      Workshop            HTML, CSS, & PHP Basics            Miami Beach, FL 2012                   #wpwor...
?What are you goingto learn today?          Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
DevelopmentEnvironment      Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
CSS  Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Basics    Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Are you  Ready          ?      Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
DevelopmentEnvironment      Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Setting up a local development enviromentYou need:✓ A Web Server (Apache) w/ PHP✓ Text Editor     (for plain text docs)✓ W...
Setting up a local development enviromentFor Windows:✓ WAMP (http://wampserver.com)✓ Notepad++       (http://notepad-plus-...
Setting up a local development enviromentFor Mac:✓ MAMP (http://mamp.info)✓ Text Wrangler    (http://barebones.com/product...
Download & Install                  ... now.            Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Verify that everything workshttp://localhost/                         Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Setting up your web directory✓ Navigate to web directory.✓ Create a new folder called    “workshop”.✓ Within “workshop”, c...
Setting up your web directory                         Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
You’renow Ready for      Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
What is HTML?Hyper Text Markup Language                Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
What is HTML?        Elements & Tags        <html></html>                 Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
What is HTML?        Elements & Tags                <img />                     Intro to Hacking — Tweet! @ptahdunbar #wpw...
What is HTML?            Attributes<html lang="en"></html>                   Intro to Hacking — Tweet! @ptahdunbar #wpwork...
What is HTML?            Attributes <img src="image.png" />                   Intro to Hacking — Tweet! @ptahdunbar #wpwor...
What is HTML?            Attributes<audio controls></audio>                   Intro to Hacking — Tweet! @ptahdunbar #wpwor...
What is HTML?            Comments<!-- this is a comment -->                 Intro to Hacking — Tweet! @ptahdunbar #wpworks...
What is HTML?            Comments                <!--                this is a                multi-line                co...
Basic HTML document — Hello World!<!DOCTYPE html><html><head>	 <title>Sample HTML Document</title></head><body>	 <p>Hello ...
Basic HTML document — Hello World!<!DOCTYPE html><html><head>	 <title>Sample HTML Document</title></head><body>	 <p>Hello ...
Basic HTML document — Hello World!<!DOCTYPE html><html><head>	 <title>Sample HTML Document</title></head><body>	 <p>Hello ...
Basic HTML document — Hello World!<!DOCTYPE html><html><head>	 <title>Sample HTML Document</title></head><body>	 <p>Hello ...
Basic HTML document — Hello World!<!DOCTYPE html><html><head>	 <title>Sample HTML Document</title></head><body>	 <p>Hello ...
Basic HTML document — Hello World!<!DOCTYPE html><html><head>	 <title>Sample HTML Document</title></head><body>	 <p>Hello ...
Basic HTML document — Hello World!<!DOCTYPE html><html><head>	 <title>Sample HTML Document</title></head><body>	 <p>Hello ...
Web StandardsWorld Wide Web              WHATWG Consortium                 Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Workshop.  Follow my lead...        Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Save document as hello-world.html<!DOCTYPE html><html><head>	 <title>Sample HTML Document</title></head><body>	 <!-- Hello...
Overview of (some) HTML tags• Paragraphs (p)• Headings (h1-h6)• Text Formatting               (em, strong,  blockquote)• L...
Structuring HTML Documents                      Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Structuring HTML Documents<article>                   <header><aside>                     <footer><nav>                   ...
CSS  Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
What is CSS?     Cascading Style Sheets                 Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
What is CSS?               A CSS Rule h1 { color: blue; font-size:           12px; }                      Intro to Hacking...
What is CSS?               Selector h1 { color: blue; font-size:           12px; }                     Intro to Hacking — ...
What is CSS?               Declaration h1 { color: blue; font-size:           12px; }                      Intro to Hackin...
What is CSS?         Property: value; h1 { color: blue; font-size:           12px; }                   Intro to Hacking — ...
What is CSS?           Declarations h1 { color: blue; font-size:           12px; }                   Intro to Hacking — Tw...
What is CSS?               Comments   /* This is a comment. */                    Intro to Hacking — Tweet! @ptahdunbar #w...
What is CSS?               Comments               /*               This is a multi-line               comment.            ...
What is CSS? Targeting page content     using selectors               Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
CSS Selectors - Targeting page content            By element h1 { color: blue; font-size:           12px; }               ...
CSS Selectors - Targeting page content             By element  h1 { color: blue; font-size:            12px; }<h1>I’m bein...
CSS Selectors - Targeting page content         By class attribute.title { color: blue; font-size: 12px; }                 ...
CSS Selectors - Targeting page content         By class attribute.title { color: blue; font-size: 12px; } <h2 class="title...
CSS Selectors - Targeting page content         By ID attribute#footer { color: blue; font-size:             12px; }       ...
CSS Selectors - Targeting page content         By ID attribute #footer { color: blue; font-size:              12px; }<div ...
CSS Selectors - Targeting page content         Grouping Selectors#header,#footer { color: blue; font-size:12px; }         ...
CSS Selectors - Targeting page content       Descendant Selectors#main p { color: blue; font-size: 12px; }                ...
CSS Selectors - Targeting page content           CSS Gotchas      ➡ No whitespace or special         characters      ➡ CSS...
CSS - Cascading Style Sheets How do browsers read      CSS rules?                         Intro to Hacking — Tweet! @ptahd...
How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; }                          I...
How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; }                          I...
How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; }                          I...
How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; }                          I...
How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; }                          I...
CSS - Cascading Style Sheets            Inheritance                         Intro to Hacking — Tweet! @ptahdunbar #wpworks...
CSS - Cascading Style Sheets            Inheritanceh1 { font-family: Arial; color: #333; }h2 { font-family: Arial; color: ...
CSS - Cascading Style Sheets            Inheritancebody { font-family: Arial; color: #333; }                         Intro...
CSS - Cascading Style Sheets                Specificity      How browsers deal with         conflicting rules           ID  ...
CSS - Cascading Style Sheets             Specificity Selector    ID   classes       elements                Total  body    ...
CSS - Cascading Style Sheets            Specificityh1 { color: black; }.title { color: blue; }#header h1 { color: yellow; }...
?How do we add CSSto HTML documents?         Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Different Ways to embed CSS into HTML           Inline Styles                        Intro to Hacking — Tweet! @ptahdunbar...
Different Ways to embed CSS into HTML           Inline Styles <p style="">This is blue.</p>                        Intro t...
Different Ways to embed CSS into HTML             Inline Styles<p style="color: blue;">This is blue.</                  p>...
Different Ways to embed CSS into HTML       Embedded Styles          <style></style>                        Intro to Hacki...
Different Ways to embed CSS into HTML                Embedded Styles<!DOCTYPE html><html><head>	 <title>Sample HTML Docume...
Different Ways to embed CSS into HTML  External Stylesheet files                        Intro to Hacking — Tweet! @ptahdunb...
Different Ways to embed CSS into HTML         External Stylesheet Filesp {  color: blue;  font-size: 12px;}               ...
Different Ways to embed CSS into HTML             External Stylesheet Files<!DOCTYPE html><html><head>	   <title>Sample HT...
Basics    Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
PHP Basics<?php?>             Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Questions?      Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Thank you.      Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Upcoming SlideShare
Loading in...5
×

Wcphx 2012-workshop

893

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
893
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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&amp;#x2019;t be needing a database in this class, however it&amp;#x2019;s important to have when working with PHP applications like WordPress.\n
  • \n
  • \n
  • \n
  • 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&amp;#x2019;t be needing a database in this class, however it&amp;#x2019;s important to have when working with PHP applications like WordPress.\n
  • 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&amp;#x2019;t be needing a database in this class, however it&amp;#x2019;s important to have when working with PHP applications like WordPress.\n
  • 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&amp;#x2019;t be needing a database in this class, however it&amp;#x2019;s important to have when working with PHP applications like WordPress.\n
  • \n
  • The language of the web.\nThe markup langauge for all web pages on the internet.\nEasy to learn.\n
  • 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
  • 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 &lt;b&gt; and &lt;/b&gt;\nStart and end tags are also called opening tags and closing tags\n\n
  • Here&amp;#x2019;s an example of a self-closing HTML tag.\n\n
  • 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=&quot;value&quot;\nAttributes can also have blank values\n\n
  • 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=&quot;value&quot;\nAttributes can also have blank values\n
  • 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=&quot;value&quot;\nAttributes can also have blank values\n
  • HTML contains comments, which are not interpreted by the browser.\nComments can span multiple lines\n
  • HTML contains comments, which are not interpreted by the browser.\nComments can span multiple lines\n
  • This is a basic HTML document.\nThis is all you need to create an HTML document\n
  • 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
  • The HEAD element contains meta data&amp;#x2014;information that describes the document itself.\nIt&amp;#x2019;s also where you can include resources, such as style sheets and javascript.\n\n
  • The TITLE element represents the document&apos;s title or name.\nIn this case, the title of this page is called &amp;#x201C;Sample HTML Document&amp;#x201D;.\nThis is the text that shows up in search engine results pages.\n
  • 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
  • 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
  • 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&amp;#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&amp;#x2019;t want.\n
  • 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
  • \n
  • Create this document and save it as &amp;#x201C;hello-world.html&amp;#x201D;\nVisit the page in a browser. (localhost/hello-world.html)\n\n
  • \n
  • \n
  • 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
  • \n
  • 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 &amp; feel of a document.\nCSS is not a programming language. Don&amp;#x2019;t be sacred\n
  • A CSS rule has two main parts: a selector, and one or more declarations:\n
  • A CSS rule has two main parts: a selector, and one or more declarations:\n
  • A CSS rule has two main parts: a selector, and one or more declarations:\n
  • A CSS rule has two main parts: a selector, and one or more declarations:\n
  • 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
  • A CSS comment begins with &quot;/*&quot;, and ends with &quot;*/&quot;\n
  • A CSS comment begins with &quot;/*&quot;, and ends with &quot;*/&quot;\n
  • 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
  • Global Selectors based on HTML elements\n
  • \n
  • Attribute selectors based on class attributes applied on HTML elements\n
  • \n
  • Attribute selectors based on id attribute applied on HTML elements\n
  • A selector can be\n
  • You can group selectors by commas\n
  • \n
  • \n
  • 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
  • Global Selectors based on HTML elements\n
  • Global Selectors based on HTML elements\n
  • Global Selectors based on HTML elements\n
  • Global Selectors based on HTML elements\n
  • Global Selectors based on HTML elements\n
  • \n
  • 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
  • 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
  • ID = 100\nClass = 10\nElements = 1\nTotal is the sum\n\n
  • \n
  • 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
  • \n
  • Three ways to embedd CSS into HTML documents.\n
  • Three ways to embedd CSS into HTML documents.&amp;#x201D;\n
  • Three ways to embedd CSS into HTML documents.&amp;#x201D;\n
  • \n
  • Three ways to embedd CSS into HTML documents.\n
  • \n
  • Three ways to embedd CSS into HTML documents.\n
  • Three ways to embedd CSS into HTML documents.\n
  • \n
  • 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
  • \n
  • \n
  • Wcphx 2012-workshop

    1. 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. 2. ?What are you goingto learn today? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    3. 3. DevelopmentEnvironment Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    4. 4. Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    5. 5. CSS Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    6. 6. Basics Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    7. 7. Are you Ready ? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    8. 8. DevelopmentEnvironment Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    9. 9. Setting up a local development enviromentYou 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. 10. Setting up a local development enviromentFor Windows:✓ WAMP (http://wampserver.com)✓ Notepad++ (http://notepad-plus- plus.org) Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    11. 11. Setting up a local development enviromentFor Mac:✓ MAMP (http://mamp.info)✓ Text Wrangler (http://barebones.com/products/textwrangler/)✓ TextMate (http://macromates.com/) Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    12. 12. Download & Install ... now. Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    13. 13. Verify that everything workshttp://localhost/ Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    14. 14. Setting up your web 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. 15. Setting up your web directory Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    16. 16. You’renow Ready for Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    17. 17. Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    18. 18. What is HTML?Hyper Text Markup Language Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    19. 19. What is HTML? Elements & Tags <html></html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    20. 20. What is HTML? Elements & Tags <img /> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    21. 21. What is HTML? Attributes<html lang="en"></html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    22. 22. What is HTML? Attributes <img src="image.png" /> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    23. 23. What is HTML? Attributes<audio controls></audio> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    24. 24. What is HTML? Comments<!-- this is a comment --> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    25. 25. What is HTML? Comments <!-- this is a multi-line comment --> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    26. 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. 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. 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. 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. 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. 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. 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. 33. Web StandardsWorld Wide Web WHATWG Consortium Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    34. 34. Workshop. Follow my lead... Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    35. 35. Save document as hello-world.html<!DOCTYPE html><html><head> <title>Sample HTML Document</title></head><body> <!-- Hello World --></body></html> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    36. 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. 37. Structuring HTML Documents Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    38. 38. Structuring HTML Documents<article> <header><aside> <footer><nav> <div><section> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    39. 39. CSS Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    40. 40. What is CSS? Cascading Style Sheets Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    41. 41. What is CSS? A CSS Rule h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    42. 42. What is CSS? Selector h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    43. 43. What is CSS? Declaration h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    44. 44. What is CSS? Property: value; h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    45. 45. What is CSS? Declarations h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    46. 46. What is CSS? Comments /* This is a comment. */ Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    47. 47. What is CSS? Comments /* This is a multi-line comment. */ Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    48. 48. What is CSS? Targeting page content using selectors Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    49. 49. CSS Selectors - Targeting page content By element h1 { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    50. 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. 51. CSS Selectors - Targeting page content By class attribute.title { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    52. 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. 53. CSS Selectors - Targeting page content By ID attribute#footer { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    54. 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. 55. CSS Selectors - Targeting page content Grouping Selectors#header,#footer { color: blue; font-size:12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    56. 56. CSS Selectors - Targeting page content Descendant Selectors#main p { color: blue; font-size: 12px; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    57. 57. CSS Selectors - Targeting page content CSS Gotchas ➡ No whitespace or special characters ➡ CSS is case-sensitive Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    58. 58. CSS - Cascading Style Sheets How do browsers read CSS rules? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    59. 59. How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    60. 60. How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    61. 61. How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    62. 62. How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    63. 63. How Browsers read selectorsBrowsers read from right to left #main .content p a { color: blue; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    64. 64. CSS - Cascading Style Sheets Inheritance Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    65. 65. CSS - Cascading Style Sheets Inheritanceh1 { 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. 66. CSS - Cascading Style Sheets Inheritancebody { font-family: Arial; color: #333; } Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    67. 67. CSS - Cascading Style Sheets Specificity How browsers deal with conflicting rules ID 100 Class 10 Element 1 Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    68. 68. CSS - Cascading Style 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. 69. CSS - Cascading Style Sheets Specificityh1 { 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. 70. ?How do we add CSSto HTML documents? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    71. 71. Different Ways to embed CSS into HTML Inline Styles Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    72. 72. Different Ways to embed CSS into HTML Inline Styles <p style="">This is blue.</p> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    73. 73. Different Ways to embed CSS into HTML Inline Styles<p style="color: blue;">This is blue.</ p> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    74. 74. Different Ways to embed CSS into HTML Embedded Styles <style></style> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    75. 75. Different Ways to embed 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. 76. Different Ways to embed CSS into HTML External Stylesheet files Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    77. 77. Different Ways to embed CSS into HTML External Stylesheet Filesp { color: blue; font-size: 12px;} Save file as css/style.css Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    78. 78. Different Ways to embed 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. 79. Basics Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    80. 80. PHP Basics<?php?> Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    81. 81. Questions? Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    82. 82. Thank you. Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×